Card
Cards are used to group and display content in a way that is easily readable.
Shoes!
If a dog chews shoes whose shoes does he choose?
Code Example
<Card class="w-full shadow-xl lg:w-96 bg-base-100 shrink-0">
<figure>
<img src="/img/shoe.jpg" alt="Shoes">
</figure>
<CardBody>
<CardTitle is="h2">
Shoes!
</CardTitle>
<p>If a dog chews shoes whose shoes does he choose?</p>
<CardActions class="justify-end">
<Button primary>
Buy Now
</Button>
</CardActions>
</CardBody>
</Card>Components
The Card components include the following:
Card
Card is the wrapper around the below components. Customize its appearance with these props:
| Prop | Type | Description |
|---|---|---|
is | string | allows changing the element tag. |
bordered | boolean | gives the card a 1px base-color border. |
compact | boolean | reduces the card's padding sizes. |
side | boolean | places the card body next to the image |
image-full | boolean | |
glass | boolean |
CardBody
The CardBody holds the content for the Card.
CardTitle
The CardTitle holds the title for the Card.
CardActions
The CardActions hold the buttons and other actions for the Card.
Bordered
The bordered prop gives the card a 1px base-colored border.
Shoes!
If a dog chews shoes whose shoes does he choose?
Code Example
<Card bordered class="w-full lg:w-96">
<figure>
<img src="/img/shoe.jpg" alt="Shoes">
</figure>
<CardBody>
<CardTitle is="h2">
Shoes!
</CardTitle>
<p>If a dog chews shoes whose shoes does he choose?</p>
<CardActions class="justify-end">
<Button primary>
Buy Now
</Button>
</CardActions>
</CardBody>
</Card>Compact Card
The compact prop reduces the padding size.
Shoes!
If a dog chews shoes whose shoes does he choose? Code Example
<Card compact class="w-full shadow-xl lg:w-96">
<figure>
<img src="/img/shoe.jpg" alt="Shoes">
</figure>
<CardBody>
<CardTitle is="h2">
Shoes!
</CardTitle>
<Text>If a dog chews shoes whose shoes does he choose?</Text>
<CardActions class="justify-end">
<Button primary>
Buy Now
</Button>
</CardActions>
</CardBody>
</Card>Image on Side
The side prop places the content to the side of the image.
New movie is released!
Click the button to watch on Jetflix app. Code Example
<Card side class="shadow-xl">
<figure><img src="/img/spiderman.jpg" alt="Spiderman"></figure>
<CardBody>
<CardTitle is="h2">
New movie is released!
</CardTitle>
<Text>Click the button to watch on Jetflix app.</Text>
<CardActions class="justify-end">
<Button primary>
Watch
</Button>
</CardActions>
</CardBody>
</Card>You can also place the figure element after CardBody to show the image on the right.
New movie is released!
Click the button to watch on Jetflix app. Code Example
<Card side class="shadow-xl">
<CardBody>
<CardTitle is="h2">
New movie is released!
</CardTitle>
<Text>Click the button to watch on Jetflix app.</Text>
<CardActions class="justify-end">
<Button primary>
Watch
</Button>
</CardActions>
</CardBody>
<figure><img src="/img/spiderman.jpg" alt="Spiderman"></figure>
</Card>Image Full
The image-full prop places the image behind the CardBody.
Order a Big Kahuna Burger!
Use the app to get a 10% discount. Code Example
<Card image-full class="shadow-xl">
<figure><img src="/img/hamburger-1.jpg" alt="Burger"></figure>
<CardBody>
<CardTitle is="h2">
Order a Big Kahuna Burger!
</CardTitle>
<Text>Use the app to get a 10% discount.</Text>
<CardActions class="justify-end items-end h-full">
<Button primary>
Order Now
</Button>
</CardActions>
</CardBody>
</Card>Glass
That Burger is so good!
You can see the other burger's colors in the glassy background. Code Example
<Card glass class="w-96">
<figure><img src="/img/hamburger-5.jpg" alt="car!"></figure>
<CardBody>
<CardTitle is="h2">
That Burger is so good!
</CardTitle>
<Text>
You can see the other burger's colors in the glassy background.
</Text>
<CardActions class="justify-end">
<Button primary>
Get yours!
</Button>
</CardActions>
</CardBody>
</Card>With Badge
This example shows a badge in the CardTitle.
Shoes! NEW
If a dog chews shoes whose shoes does he choose? Fashion
Products
Code Example
<Card class="shadow-xl w-96 bg-base-100 shrink-0">
<figure>
<img src="/img/shoe.jpg" alt="Shoes" />
</figure>
<CardBody>
<CardTitle is="h2">
Shoes!
<Badge secondary>NEW</Badge>
</CardTitle>
<p>If a dog chews shoes whose shoes does he choose?</p>
<CardActions class="justify-end">
<Badge outline>Fashion</Badge>
<Badge outline>Products</Badge>
</CardActions>
</CardBody>
</Card>Image at Bottom
The image can be placed at the bottom by putting the figure after the CardBody.
Shoes!
If a dog chews shoes whose shoes does he choose? Code Example
<Card bordered class="w-96">
<CardBody>
<CardTitle is="h2">
Shoes!
</CardTitle>
<Text>If a dog chews shoes whose shoes does he choose?</Text>
</CardBody>
<figure><img src="/img/shoe.jpg" alt="Shoe"></figure>
</Card>Centered Content & Paddings
This example shows a card with centered content.
Shoes!
If a dog chews shoes whose shoes does he choose? Code Example
<Card bordered class="shadow-xl w-96">
<figure class="px-6 pt-6">
<img src="/img/shoe.jpg" alt="Shoe" class="rounded-xl">
</figure>
<CardBody class="items-center text-center">
<CardTitle is="h2">
Shoes!
</CardTitle>
<Text>If a dog chews shoes whose shoes does he choose?</Text>
<CardActions>
<Button primary>
Buy Now
</Button>
</CardActions>
</CardBody>
</Card>Card with Image Overlay
This example uses the image-full prop and the accent color for the Button.
Shoes!
If a dog chews shoes whose shoes does he choose? Code Example
<Card image-full class="shadow-xl w-96 bg-base-100">
<figure><img src="/img/shoe.jpg" alt="Shoe"></figure>
<CardBody class="card-body">
<CardTitle is="h2">
Shoes!
</CardTitle>
<Text>If a dog chews shoes whose shoes does he choose?</Text>
<CardActions class="justify-end">
<Button accent>
Buy Now
</Button>
</CardActions>
</CardBody>
</Card>No Image
If you don't include a figure element, the CardBody will take up the available space.
Card title!
If a dog chews shoes whose shoes does he choose? Code Example
<Card bordered class="shadow-xl w-96">
<CardBody>
<CardTitle is="h2">Card title!</CardTitle>
<Text>If a dog chews shoes whose shoes does he choose?</Text>
<CardActions class="justify-end">
<Button primary>Buy Now</Button>
</CardActions>
</CardBody>
</Card>Custom Color
You can set custom backgrounds on cards. This example shows a primary background using DaisyUI color classes.
Card title!
If a dog chews shoes whose shoes does he choose? Code Example
<Card class="w-96 bg-primary text-primary-content">
<CardBody>
<CardTitle is="h2">
Card title!
</CardTitle>
<Text>If a dog chews shoes whose shoes does he choose?</Text>
<CardActions class="justify-end card-actions">
<Button>Buy Now</Button>
</CardActions>
</CardBody>
</Card>Centered with Neutral Color
This example uses the neutral background color.
Cookies!
We are using cookies for no reason. Code Example
<Card class="w-96 bg-neutral text-neutral-content">
<CardBody class="items-center text-center">
<CardTitle is="h2">Cookies!</CardTitle>
<Text>We are using cookies for no reason.</Text>
<CardActions class="justify-end">
<Button primary>Accept</Button>
<Button ghost>Deny</Button>
</CardActions>
</CardBody>
</Card>Action On Top
This example puts the CardActions first puts close button inside.
We are using cookies for no reason.
Code Example
<Card class="shadow-xl w-96 bg-base-100">
<CardBody>
<CardActions class="justify-end">
<Button class="btn btn-square btn-sm">
<Icon name="feather:x" />
</Button>
</CardActions>
<Text>We are using cookies for no reason.</Text>
</CardBody>
</Card>Responsive Example
This card uses Tailwind's responsive prefixes to give a vertical layout on small screens and a horizontal layout on larger screens.
New album is released!
Click the button to listen on Spotiwhy app. Code Example
<Card class="shadow-xl lg:card-side bg-base-100">
<figure><img src="/img/spiderman.jpg" alt="Spiderman"></figure>
<CardBody>
<CardTitle is="h2">
New album is released!
</CardTitle>
<Text>Click the button to listen on Spotiwhy app.</Text>
<CardActions class="justify-end">
<Button primary>
Listen
</Button>
</CardActions>
</CardBody>
</Card>