Card
| Modifier | DaisyUI class |
|---|---|
| :image_full | image-full |
| :bordered | card-bordered |
| :normal | card-normal |
| :compact | card-compact |
| :side | card-side |
| :glass | glass |
| :primary | bg-primary text-primary-content |
| :secondary | bg-secondary text-secondary-content |
| :accent | bg-accent text-accent-content |
| :neutral | bg-neutral text-neutral-content |
| :base_100 | bg-base-100 text-base-content |
| :base_200 | bg-base-200 text-base-content |
| :base_300 | bg-base-300 text-base-content |
| :info | bg-info text-info-content |
| :success | bg-success text-success-content |
| :warning | bg-warning text-warning-content |
| :error | bg-error text-error-content |
# Card
1
Card :base_100, class: "w-96 shadow-xl" do |card|
2
figure do
3
img(src:, alt: "Shoes")
4
end
5
6
card.body do
7
card.title do
8
"Shoes!"
9
end
10
11
p do
12
"If a dog chews shoes whose shoes does he choose?"
13
end
14
15
card.actions class: "justify-end" do
16
Button :primary do
17
"Buy Now"
18
end
19
end
20
end
21
end
If a dog chews shoes whose shoes does he choose?
# Compact card (less padding for `card-body`)
1
Card :compact, :base_100, class: "w-96 shadow-xl" do |card|
2
figure do
3
img(src:, alt: "Shoes")
4
end
5
6
card.body do
7
card.title do
8
"Shoes!"
9
end
10
11
p do
12
"If a dog chews shoes whose shoes does he choose?"
13
end
14
15
card.actions class: "justify-end" do
16
Button :primary do
17
"Buy Now"
18
end
19
end
20
end
21
end
If a dog chews shoes whose shoes does he choose?
# Card with badge
1
Card :base_100, class: "w-96 shadow-xl" do |card|
2
figure do
3
img(src:, alt: "Shoes")
4
end
5
6
card.body do
7
card.title do
8
plain "Shoes!"
9
Badge :secondary do
10
"NEW"
11
end
12
end
13
14
p do
15
"If a dog chews shoes whose shoes does he choose?"
16
end
17
18
card.actions class: "justify-end" do
19
Badge :outline do
20
"Fashion"
21
end
22
Badge :outline do
23
"Products"
24
end
25
end
26
end
27
end
If a dog chews shoes whose shoes does he choose?
# Card with bottom image
1
Card :base_100, class: "w-96 shadow-xl" do |card|
2
card.body do
3
card.title do
4
"Shoes!"
5
end
6
7
p do
8
"If a dog chews shoes whose shoes does he choose?"
9
end
10
end
11
12
figure do
13
img(src:, alt: "Shoes")
14
end
15
end
If a dog chews shoes whose shoes does he choose?
# Card with centered content and paddings
1
Card :base_100, class: "w-96 shadow-xl" do |card|
2
figure class: "px-10 pt-10" do
3
img(src:, alt: "Shoes", class: "rounded-xl")
4
end
5
6
card.body class: "items-center text-center" do
7
card.title do
8
"Shoes!"
9
end
10
11
p do
12
"If a dog chews shoes whose shoes does he choose?"
13
end
14
15
card.actions do
16
Button :primary do
17
"Buy Now"
18
end
19
end
20
end
21
end
If a dog chews shoes whose shoes does he choose?
# Card with image overlay
1
Card :image_full, :base_100, class: "w-96 shadow-xl" do |card|
2
card.body do
3
card.title do
4
"Shoes!"
5
end
6
7
p do
8
"If a dog chews shoes whose shoes does he choose?"
9
end
10
end
11
12
figure do
13
img(
14
src:,
15
alt: "Shoes"
16
)
17
end
18
end
If a dog chews shoes whose shoes does he choose?
# Card with no image
1
Card :base_100, class: "w-96 shadow-xl" do |card|
2
card.body do
3
card.title do
4
"Shoes!"
5
end
6
7
p do
8
"If a dog chews shoes whose shoes does he choose?"
9
end
10
11
card.actions class: "justify-end" do
12
Button :primary do
13
"Buy Now"
14
end
15
end
16
end
17
end
If a dog chews shoes whose shoes does he choose?
# Card with custom color
1
Card :primary, class: "w-96" do |card|
2
card.body do
3
card.title do
4
"Card title!"
5
end
6
7
p do
8
"If a dog chews shoes whose shoes does he choose?"
9
end
10
11
card.actions class: "justify-end" do
12
Button :primary do
13
"Buy Now"
14
end
15
end
16
end
17
end
If a dog chews shoes whose shoes does he choose?
# Centered card with neutral color
1
Card :neutral, class: "w-96" do |card|
2
card.body class: "items-center text-center" do
3
card.title do
4
"Cookies!"
5
end
6
7
p do
8
"We are using cookies for no reason."
9
end
10
11
card.actions class: "justify-end" do
12
Button :primary do
13
"Accept"
14
end
15
16
Button :ghost do
17
"Deny"
18
end
19
end
20
end
21
end
We are using cookies for no reason.
# Card with action on top
1
Card :base_100, class: "w-96 shadow-xl" do |card|
2
card.body do
3
card.actions class: "justify-end" do
4
Button :sm, :square do
5
x_icon_svg
6
end
7
end
8
9
p do
10
"We are using cookies for no reason."
11
end
12
end
13
end
We are using cookies for no reason.
# Card with action on top
1
Card :glass, class: "w-96" do |card|
2
figure do
3
img(src:, alt: "car!")
4
end
5
6
card.body do
7
card.title do
8
"Life hack"
9
end
10
11
p do
12
"How to park your car at your garage?"
13
end
14
15
card.actions class: "justify-end" do
16
Button :primary do
17
"Learn now!"
18
end
19
end
20
end
21
end
How to park your car at your garage?
# Card with image on side
1
Card :side, :base_100, class: "shadow-xl" do |card|
2
figure do
3
img(src:, alt: "Movie")
4
end
5
6
card.body do
7
card.title do
8
"New movie is released!"
9
end
10
11
p do
12
"Click the button to watch on Jetflix app."
13
end
14
15
card.actions class: "justify-end" do
16
Button :primary do
17
"Watch"
18
end
19
end
20
end
21
end
Click the button to watch on Jetflix app.
# Responsive card (vertical on small screen, horizontal on large screen)
1
Card :base_100, responsive: {lg: :side}, class: "shadow-xl" do |card|
2
figure do
3
img(src:, alt: "Album")
4
end
5
6
card.body do
7
card.title do
8
"New album is released!"
9
end
10
11
p do
12
"Click the button to listen on Spotiwhy app."
13
end
14
15
card.actions class: "justify-end" do
16
Button :primary do
17
"Listen"
18
end
19
end
20
end
21
end
Click the button to listen on Spotiwhy app.