Cards

A card is a block that groups an image, a heading, text and actions about one item. The LearnUp platform shows its courses this way. The component is the card class, and its parts mark up the content inside.

Parts of a card

Class	What it is
`card`	The component itself — the outer block
`figure` (tag)	A wrapper for the image
`card-body`	The inner block with padding
`card-title`	The heading
`card-actions`	A row of buttons at the bottom

A course card

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="card w-80 bg-base-100 shadow-sm">
  <figure>
    <img src="/media/photo-400x250.jpg" alt="Course cover">
  </figure>
  <div class="card-body">
    <h2 class="card-title">HTML basics</h2>
    <p>12 lessons: tags, links, tables and forms.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Enroll</button>
    </div>
  </div>
</div>

Under the code there is a card with a full-width image, a heading, a description and a button on the right. The card itself has no background or shadow — they come from the bg-base-100 and shadow-sm utilities, and justify-end pushes the button to the right.

Border and size

Instead of a shadow you can give a border with the card-border modifier, and change text size and padding with card-sm or card-lg. A badge fits nicely into the heading:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="card card-border card-sm w-72 bg-base-100">
  <div class="card-body">
    <h2 class="card-title">
      JavaScript from scratch
      <span class="badge badge-secondary">New</span>
    </h2>
    <p>24 lessons · $29</p>
  </div>
</div>

A compact card with no image, a thin border and a pink "New" badge. Badges are covered in detail in the lesson on alerts and badges.

A horizontal card

The card-side modifier puts the image to the left of the text:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="card card-side bg-base-200">
  <figure class="w-32 shrink-0">
    <img src="/media/photo-200x200.jpg" alt="Course cover">
  </figure>
  <div class="card-body">
    <h2 class="card-title">Flexbox layouts</h2>
    <p>You have finished 7 of 10 lessons.</p>
  </div>
</div>

Image on the left, text on the right — this is how the dashboard lists courses in progress.

A grid of cards

Cards are arranged with Tailwind utilities — usually a grid:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="grid gap-4 p-4 sm:grid-cols-2">
  <div class="card bg-base-200">
    <div class="card-body">
      <h2 class="card-title">HTML basics</h2>
      <p>$19</p>
    </div>
  </div>
  <div class="card bg-base-200">
    <div class="card-body">
      <h2 class="card-title">JavaScript from scratch</h2>
      <p>$29</p>
    </div>
  </div>
</div>

On a wide screen the cards stand in two columns, on a narrow one they stack.

Common mistake

Putting the image straight into card-body. It gets the card's inner padding and does not reach the edges, and it does not get the card's rounded corners. Put an image that should span the full width into a <figure> tag — directly inside card, before card-body.

Thanks for reading!