Card

Cards are a flexible container that group related content and actions together.

Class Name	Type	Description
card	Component	Card
card-header	Inner	Card header component
card-body	Inner	Card body component
card-footer	Inner	Card footer component
card-title	Inner	Card title
card-subtitle	Inner	Card subtitle
card-action	Modifier	Clickable card
card-img-overlay	Modifier	Card overlay
card-aside	Modifier	Card Aside

Basic card

The basic card component offers a flexible and structured container for displaying content. It comprises a header, body, and footer, facilitating the presentation of information with a clear hierarchy.

Header: Used for titles or categories.
Body: Contains the main content, such as text and images.
Footer: Ideal for actions, like buttons or links.

Basic Card

Card Title

Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

HTML

<div class="card max-w-72">
  <div class="card-header">
    <p class='mb-0'>Basic Card</p>
  </div>
  <div class="card-body">
    <h4 class="card-title">Card Title</h4>
    <p class="card-subtitle">Subtitle</p>
    <p class='mb-0'>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer">
    <button class='btn btn-sm btn-text-primary'>Learn more</button>
  </div>
</div>

Media

Cards support flexible image placement using utility classes.

Use .card-img-top, .card-img-bottom, .card-img-left, or .card-img-right to place images on any side of the card.

Hummingbirds

Hummingbirds belong to the avian family Trochilidae, and their closest relatives are the equally fascinating swifts.

HTML

<div class="card max-w-88">
  <img src="/images/1.png" alt="Hummingbird" class='card-img-top' />
  <div class="card-body">
    <h4 class="card-title">Hummingbirds</h4>
    <p class='mb-0'>Hummingbirds belong to the avian family Trochilidae, and their closest relatives are the equally fascinating swifts.</p>
  </div>
  <div class="card-footer">
    <button class='btn btn-sm btn-text-primary'>SHARE</button>
    <button class='btn btn-sm btn-text-primary'>LEARN MORE</button>
  </div>
</div>

Card action

A card action turns the entire card into a clickable element, allowing navigation or interaction when selected. Use .card-action along with .card.

Hummingbirds

Hummingbirds belong to the avian family Trochilidae, and their closest relatives are the equally fascinating swifts.

HTML

<a href="#" class="card card-action max-w-88">
  <img src="/images/1.png" alt="Hummingbird" class='card-img-top' />
  <div class="card-body">
    <h4 class="card-title">Hummingbirds</h4>
    <p class="mb-0">Hummingbirds belong to the avian family Trochilidae, and their closest relatives are the equally fascinating swifts.</p>
  </div>
</a>

Complex interaction

Combine components and utility classes to create richer layouts with customized spacing, alignment, and behavior.

Black-throated Mango male

November 10, 2021

The male Black-throated Mango hummingbird has a metallic bronze-green upper body and flanks, a black throat and chest, and white underparts

HTML

<div class="card max-w-88">
  <div class="card-header border-0">
    <div class="flex items-center">
      <div class="avatar avatar-lg me-4">
        <img src="/images/avatar_1.webp" alt="Avatar" class="rounded-full"/>
      </div>
      <div>
        <p class="text-default mb-0">Black-throated Mango male</p>
        <p class="mb-0">November 10, 2021</p>
      </div>
      <button class='btn btn-icon ms-auto self-start -mr-2'>
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16"><path fill="currentColor" d="M8 5a1 1 0 1 1 0-2a1 1 0 0 1 0 2m0 4a1 1 0 1 1 0-2a1 1 0 0 1 0 2m-1 3a1 1 0 1 0 2 0a1 1 0 0 0-2 0" stroke-width="0.5" stroke="currentColor"/></svg>
      </button>
    </div>
  </div>
  <img src="/images/2.png" alt="Hummingbird" class='card-img' />
  <div class="card-body">
    <p class="text-sm mb-0">The male Black-throated Mango hummingbird has a metallic bronze-green upper body and flanks, a black throat and chest, and white underparts</p>
  </div>
  <div class="card-footer flex">
    <button class='btn btn-icon'>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-dasharray="32" stroke-dashoffset="32" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c0 0 0 0 -0.76 -1c-0.88 -1.16 -2.18 -2 -3.74 -2c-2.49 0 -4.5 2.01 -4.5 4.5c0 0.93 0.28 1.79 0.76 2.5c0.81 1.21 8.24 9 8.24 9M12 8c0 0 0 0 0.76 -1c0.88 -1.16 2.18 -2 3.74 -2c2.49 0 4.5 2.01 4.5 4.5c0 0.93 -0.28 1.79 -0.76 2.5c-0.81 1.21 -8.24 9 -8.24 9"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.7s" values="32;0"/></path></svg>
    </button>
    <button class='btn btn-icon'>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M17 22q-1.25 0-2.125-.875T14 19q0-.15.075-.7L7.05 14.2q-.4.375-.925.588T5 15q-1.25 0-2.125-.875T2 12t.875-2.125T5 9q.6 0 1.125.213t.925.587l7.025-4.1q-.05-.175-.062-.337T14 5q0-1.25.875-2.125T17 2t2.125.875T20 5t-.875 2.125T17 8q-.6 0-1.125-.213T14.95 7.2l-7.025 4.1q.05.175.063.338T8 12t-.012.363t-.063.337l7.025 4.1q.4-.375.925-.587T17 16q1.25 0 2.125.875T20 19t-.875 2.125T17 22m0-2q.425 0 .713-.287T18 19t-.288-.712T17 18t-.712.288T16 19t.288.713T17 20M5 13q.425 0 .713-.288T6 12t-.288-.712T5 11t-.712.288T4 12t.288.713T5 13m12-7q.425 0 .713-.288T18 5t-.288-.712T17 4t-.712.288T16 5t.288.713T17 6m0-1" stroke-width="0.5" stroke="currentColor"/></svg>
    </button>
    <button class='btn btn-icon ms-auto'>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 19.15l3.875-3.875q.3-.3.7-.3t.7.3t.3.713t-.3.712l-3.85 3.875q-.575.575-1.425.575t-1.425-.575L6.7 16.7q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3zm0-14.3L8.15 8.7q-.3.3-.7.288t-.7-.288q-.3-.3-.312-.712t.287-.713l3.85-3.85Q11.15 2.85 12 2.85t1.425.575l3.85 3.85q.3.3.288.713t-.313.712q-.3.275-.7.288t-.7-.288z" stroke-width="0.5" stroke="currentColor"/></svg>
    </button>
  </div>
</div>

Card overlay

Place content over an image using the .card-img-overlay class.

Hummingbirds

Hummingbirds are birds native to the Americas and comprise the biological family Trochilidae.

HTML

<div class="card card-img-overlay max-w-88">
  <img src="/images/2.png" alt="Hummingbird" class="card-img-top" />
  <div class="card-body flex flex-col items-start">
    <h4 class="card-title">Hummingbirds</h4>
    <p class="mb-0">Hummingbirds are birds native to the Americas and comprise the biological family Trochilidae.</p>
    <button class="btn btn-sm btn-primary mt-auto">LEARN MORE</button>
  </div>
</div>

Card aside

Use the .card-aside layout to place images or media alongside card content, either on the left or right.

Violetear

The violetears are hummingbirds of the genus Colibri.

Violetear

The violetears are hummingbirds of the genus Colibri.

HTML

<div class="card card-aside max-w-120">
  <div class="flex items-center justify-center">
    <img src="/images/3.png" alt="Hummingbird" class='card-img-left' />
  </div>
  <div class="card-body">
    <h4 class="card-title">Violetear</h4>
    <p class="mb-0">The violetears are hummingbirds of the genus Colibri.</p>
    <button class="btn btn-sm btn-primary mt-4">Continue</button>
  </div>
</div>

<div class="card card-aside max-w-120">
  <div class="card-body">
    <h4 class="card-title">Violetear</h4>
    <p class="mb-0">The violetears are hummingbirds of the genus Colibri.</p>
    <button class="btn btn-sm btn-primary mt-4">Continue</button>
  </div>
  <div class="flex items-center justify-center">
    <img src="/images/3.png" alt="Hummingbird" class='card-img-right' />
  </div>
</div>

CSS variables

The card component is built using a set of CSS variables. These variables provide flexibility for customizing styles.

.card {
  --card-bg: var(--background-color-subtle);
  --card-color: var(--text-color-muted);
  --card-border-width: 1px;
  --card-border-color: var(--border-color-base);
  --card-border-radius: var(--radius-lg);
  --card-padding-x: --spacing(4);
  --card-padding-y: --spacing(4);
  --card-cap-padding-x: --spacing(2);
  --card-cap-padding-y: --spacing(2);
  --card-cap-bg: transparent;
  --card-cap-color: null;
  --card-title-color: var(--text-color-default);
  --card-title-space-y: --spacing(2);
}

hummingbird

Getting Started

Customize

Layout & content

Forms

Components

Card

Basic card

Card Title

Media

Hummingbirds

Card action

Hummingbirds

Complex interaction

Card overlay

Hummingbirds

Card aside

Violetear

Violetear

CSS variables