tabler/docs/content/ui/components/card.mdx

---
title: Card
summary: A card groups related content in one box, with an optional header, footer, image and actions, and it's the building block of most Tabler pages.
description: Organize content with flexible cards. Combine headers, footers, images, and actions to build sections that work on any screen size.
related: [/ui/components/card-gradient, /ui/components/ribbon]
source: core/scss/ui/_cards.scss
css-vars: card
classnames:
  component:
    - class: card
      desc: Container element
  part:
    - class: card-header
      desc: Title bar at the top
    - class: card-title
      desc: Heading, inside the header or the body
    - class: card-subtitle
      desc: Small label above the title
    - class: card-body
      desc: Content area
    - class: card-footer
      desc: Row at the bottom
    - class: card-meta
      desc: Muted secondary line, for a role or a date
    - class: card-actions
      desc: Slot for controls on the trailing edge of the header
    - class: card-btn
      desc: Full width action along the bottom edge
    - class: card-img-top
      desc: Image above the body; card-img-end rounds the trailing corners instead
    - class: card-img-overlay
      desc: Content laid over an image; add card-img-overlay-dark for a scrim
    - class: card-cover
      desc: Header with a background photo and an overlay; card-cover-blurred blurs it
    - class: card-stamp
      desc: Large decorative mark in the corner
    - class: card-status-top
      desc: Colored bar on an edge; also -bottom and -start
    - class: card-progress
      desc: Progress bar attached to the card edge
    - class: card-tabs
      desc: Wrapper for a card whose header is a row of tabs
    - class: card-header-tabs
      desc: Tabs inside the header; card-header-pills for the pill style
    - class: card-table
      desc: Table that sits flush inside the card
    - class: card-code
      desc: Replaces the body for a code block, removing the padding
    - class: card-list-group
      desc: List group that sits flush inside the card
  style:
    - class: card-borderless
      desc: Removes the border
    - class: card-transparent
      desc: Removes the background and the border
    - class: card-dashed
      desc: Dashed border, for an empty or a placeholder card
  modifier:
    - class: card-stacked
      desc: Draws a second card behind this one
    - class: card-rotate-start
      desc: Tilts the card; also -end, -left and -right
    - class: card-body-scrollable
      desc: Scrolls the body instead of growing the card
  behavior:
    - class: card-active
      desc: Marks the card as selected
    - class: card-inactive
      desc: Dims the card
    - class: card-link
      desc: Whole card is a link; -pop and -rotate add a hover effect
  size:
    - class: card-sm
      desc: Tighter padding
    - class: card-md
      desc: Default padding
    - class: card-lg
      desc: Roomier padding
---
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';

## Default card

Use the `.card` and `.card-body` classes to create a card and use it as the basis for a more advanced card design. A card groups related content in one box with a border and a background, and it's the building block of most Tabler pages.

<Example column>
<div class="card">
  <div class="card-body"><p>This is some text within a card body.</p></div>
</div>
</Example>

## Card padding

You can change the padding of a newly created card. To do it, use the `.card-sm`, `.card-md` or `.card-lg` classes.

`.card-sm` fits small items such as widgets, and `.card-lg` gives long text more room. On small screens the padding shrinks on its own.

<Example column>
<div class="card card-sm"><div class="card-body">This is some text within a card body.</div></div>
<div class="card"><div class="card-body">This is some text within a card body.</div></div>
<div class="card card-md"><div class="card-body">This is some text within a card body.</div></div>
<div class="card card-lg"><div class="card-body">This is some text within a card body.</div></div>
</Example>

## Card with title

Add a title to your card by including the `.card-title` class within `.card-body`. You can also place the title inside the `.card-header` element to separate the title from the content with a horizontal line.

<Example column>
<div class="card">
  <div class="card-body">
    <h3 class="card-title">Card title</h3>
    <p class="text-secondary">This is some text within a card body.</p>
  </div>
</div>
<div class="card">
  <div class="card-header"><h3 class="card-title">Card title</h3></div>
  <div class="card-body"><p class="text-secondary">This is some text within a card body.</p></div>
</div>
</Example>

## Card with title and image

Combine a title with an image at the top. The image takes the full card width and the title sits in the body below it.

<Example column>
<div class="card">
  <div class="img-responsive img-responsive-21x9 card-img-top" style="background-image: url(/static/photos/cup-of-coffee-and-an-open-book.jpg)"></div>
  <div class="card-body">
    <h3 class="card-title">Card with title and image</h3>
    <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. </p>
  </div>
</div>
</Example>

## Blog post card

A blog post card puts an image with the `.card-img-top` class at the top of the `.card`. The `.d-flex` and `.flex-column` classes on `.card-body`, together with `mt-auto` on the author row, keep the author details at the bottom even when the excerpt is short.

<Example column>
<div class="card d-flex flex-column">
  <a href="#"><img class="card-img-top" src="/static/photos/book-on-the-grass.jpg" alt="" /></a>
  <div class="card-body d-flex flex-column">
    <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
    <div class="text-secondary">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
    <div class="d-flex align-items-center pt-4 mt-auto">
      <span class="avatar" style="background-image: url(/static/avatars/023m.jpg)"></span>
      <div class="ms-3">
        <a href="#" class="text-body">Maryjo Lebarree</a>
        <div class="text-secondary">3 days ago</div>
      </div>
      <div class="ms-auto">
        <a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary" aria-label="Like">
          <Icon name="heart" />
        </a>
      </div>
    </div>
  </div>
</div>
</Example>

## Row deck

Add the `.row-deck` class to `.row` to display several cards next to one another with the same height.

<Example>
<div class="row row-deck">
  <div class="col-md-4">
    <div class="card"><div class="card-body">Short content</div></div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card"><div class="card-body">Short content</div></div>
  </div>
</div>
</Example>

## Post card with aside image

You can also put the image beside the text instead of above it. Use a `row row-0` inside the card, give the image column a fixed width, and let the body take the rest. `object-cover` on the image keeps it filling its column without distortion.

<Example>
<div class="card d-flex flex-column">
  <div class="row row-0 flex-fill">
    <div class="col-md-3">
      <a href="#">
        <img src="/static/photos/a-woman-works-on-a-laptop-at-home.jpg" class="w-100 h-100 object-cover" alt="Card side image" />
      </a>
    </div>
    <div class="col">
      <div class="card-body h-full d-flex flex-column">
        <h3 class="card-title"><a href="#">Shut up!</a></h3>
        <div class="text-secondary">Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...</div>
        <div class="d-flex align-items-center pt-4 mt-auto">
          <span class="avatar" style="background-image: url(/static/avatars/029m.jpg)"></span>
          <div class="ms-3">
            <a href="#" class="text-body">Egan Poetz</a>
            <div class="text-secondary">3 days ago</div>
          </div>
          <div class="ms-auto">
            <a href="#" class="icon d-none d-md-inline-block ms-3 text-red" aria-label="Unlike">
              <Icon name="heart" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</Example>

## Card stamp

Use a card stamp to put a large, faded icon in the top corner of a card. It is only a decoration, so it never covers the text and it does not react to clicks.

Add a `.card-stamp` element as a direct child of the card, before the card body. Put the icon in a `.card-stamp-icon` element inside it.

<Example column>
<div class="card">
  <div class="card-stamp">
    <div class="card-stamp-icon bg-yellow"><Icon name="bell" /></div>
  </div>
  <div class="card-body">
    <h3 class="card-title">Card with a stamp</h3>
    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur.</p>
  </div>
</div>
</Example>

## Card stamp size and color

Add the `card-stamp-lg` class to make the stamp bigger. Change the circle color with a `bg-*` class, and the icon color with a `text-*` class.

<Example>
<div class="row row-deck">
  <div class="col-md-6">
    <div class="card">
      <div class="card-stamp card-stamp-lg">
        <div class="card-stamp-icon bg-primary"><Icon name="ghost" /></div>
      </div>
      <div class="card-body">
        <h3 class="card-title">Large stamp</h3>
        <p class="text-secondary">The large stamp is a good fit for banners and wide cards.</p>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card bg-primary text-primary-fg">
      <div class="card-stamp">
        <div class="card-stamp-icon bg-white text-primary"><Icon name="star" /></div>
      </div>
      <div class="card-body">
        <h3 class="card-title">Stamp on a color card</h3>
        <p>Use a white circle with a colored icon on a card with a background color.</p>
      </div>
    </div>
  </div>
</div>
</Example>

## Stacked card

The `card-stacked` class draws a second card edge behind the card, so it looks like a small pile. Use it to hint that there is more than one item, for example a group of similar entries.

<Example column>
<div class="card card-stacked">
  <div class="card-body">
    <h3 class="card-title">Stacked card</h3>
    <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. </p>
  </div>
</div>
</Example>

## Tabbed card

Wrap several cards in `.card-tabs` and put a `.nav-tabs` list above them to switch between them with [tabs](/ui/components/tab). Only one card is visible at a time, so it's a way to fit more content into the same space.

<Example column>
<div class="card-tabs">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a>
    </li>
    <li class="nav-item"><a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a></li>
    <li class="nav-item"><a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a></li>
    <li class="nav-item"><a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab-top-1" class="card tab-pane active show">
      <div class="card-body">
        <div class="card-title">Content of tab #1</div>
        <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. </p>
      </div>
    </div>
    <div id="tab-top-2" class="card tab-pane">
      <div class="card-body">
        <div class="card-title">Content of tab #2</div>
        <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. </p>
      </div>
    </div>
    <div id="tab-top-3" class="card tab-pane">
      <div class="card-body">
        <div class="card-title">Content of tab #3</div>
        <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. </p>
      </div>
    </div>
    <div id="tab-top-4" class="card tab-pane">
      <div class="card-body">
        <div class="card-title">Content of tab #4</div>
        <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. </p>
      </div>
    </div>
  </div>
</div>
</Example>

## Card status

Add a status color to the top, bottom or side of a card. Use `card-status-top`, `card-status-bottom` or `card-status-start` with a `bg-*` color.

<Example>
<div class="row row-deck">
  <div class="col-md-4">
    <div class="card">
      <div class="card-status-top bg-primary"></div>
      <div class="card-body">Top status</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-status-bottom bg-green"></div>
      <div class="card-body">Bottom status</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-status-start bg-orange"></div>
      <div class="card-body">Side status</div>
    </div>
  </div>
</div>
</Example>

## Card progress

Put a progress bar at the edge of a card with `card-progress`. It squares off against the card corners, so use it as the first or the last child.

<Example>
<div class="card">
  <div class="card-body">
    <h3 class="card-title">Storage</h3>
    <p class="text-secondary mb-0">484 GB of 512 GB used</p>
  </div>
  <div class="progress card-progress">
    <div class="progress-bar" style="width: 94%" role="progressbar" aria-valuenow="94" aria-valuemin="0" aria-valuemax="100" aria-label="94% used"></div>
  </div>
</div>
</Example>

## Card actions

Use `card-actions` for buttons and links in a card header. It keeps them aligned with the title.

<Example>
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Team members</h3>
    <div class="card-actions">
      <a href="#" class="btn btn-primary"> <Icon name="plus" /> Invite </a>
    </div>
  </div>
  <div class="card-body">Invite a teammate to this project.</div>
</div>
</Example>

## Card subtitle

Add `card-subtitle` above a title for a small label, such as a category or a date.

<Example>
<div class="card">
  <div class="card-body">
    <p class="card-subtitle">Reports</p>
    <h3 class="card-title">Monthly summary</h3>
    <p class="text-secondary mb-0">Every report from the last 30 days.</p>
  </div>
</div>
</Example>

## Card surfaces

Change how solid a card looks. `card-borderless` drops the border, `card-dashed` draws it dashed, and `card-transparent` removes the background as well - useful for an "add new" tile.

<Example>
<div class="row row-deck">
  <div class="col-md-4">
    <div class="card card-borderless">
      <div class="card-body">Borderless</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card card-dashed">
      <div class="card-body">Dashed</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card card-transparent">
      <div class="card-body text-secondary"><Icon name="plus" inline /> Add new</div>
    </div>
  </div>
</div>
</Example>

## Header and footer variants

`card-header-light` tints the header, and `card-footer-transparent` drops the footer background and its top padding.

<Example>
<div class="card">
  <div class="card-header card-header-light">
    <h3 class="card-title">Invoice #4321</h3>
  </div>
  <div class="card-body">Paid on 12 May.</div>
  <div class="card-footer card-footer-transparent">
    <a href="#" class="link-primary">Download PDF</a>
  </div>
</div>
</Example>

## Scrollable body

Add `card-body-scrollable` with a height to keep a long list inside the card instead of stretching it.

<Example>
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Changelog</h3>
  </div>
  <div class="card-body card-body-scrollable" style="height: 10rem">
    <p>Fixed the dropdown position inside a card.</p>
    <p>Added a dark variant to the image overlay.</p>
    <p>Improved the contrast of muted text.</p>
    <p>Removed the unused card options markup.</p>
    <p>Documented the scrollable card body.</p>
  </div>
</div>
</Example>

## Table in a card

Add `card-table` to a table so it runs edge to edge and drops its bottom margin.

<Example>
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Invoices</h3>
  </div>
  <table class="table card-table">
    <thead>
      <tr>
        <th>Number</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>#4321</td>
        <td><span class="status status-green">Paid</span></td>
      </tr>
      <tr>
        <td>#4322</td>
        <td><span class="status status-yellow">Pending</span></td>
      </tr>
    </tbody>
  </table>
</div>
</Example>

## Clickable card

Make the whole card a link with `card-link`. Add `card-link-pop` to lift it on hover, or `card-link-rotate` to tilt it.

<Example>
<div class="row row-deck">
  <div class="col-md-6">
    <a href="#" class="card card-link card-link-pop">
      <div class="card-body">
        <h3 class="card-title">Lifts on hover</h3>
        <p class="text-secondary mb-0">card-link-pop</p>
      </div>
    </a>
  </div>
  <div class="col-md-6">
    <a href="#" class="card card-link card-link-rotate">
      <div class="card-body">
        <h3 class="card-title">Tilts on hover</h3>
        <p class="text-secondary mb-0">card-link-rotate</p>
      </div>
    </a>
  </div>
</div>
</Example>

## Card states

`card-active` marks the selected card, and `card-inactive` fades one out until it is hovered.

<Example>
<div class="row row-deck">
  <div class="col-md-6">
    <div class="card card-active">
      <div class="card-body">Active card</div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card card-inactive">
      <div class="card-body">Inactive card</div>
    </div>
  </div>
</div>
</Example>

## Image overlay

Put content on top of an image with `card-img-overlay`. Add `card-img-overlay-dark` for a gradient that keeps light text readable.

<Example>
<div class="card">
  <img src="/static/photos/a-woman-works-on-a-laptop-at-home.jpg" alt="" class="card-img" />
  <div class="card-img-overlay card-img-overlay-dark">
    <h3 class="card-title text-white">Working from home</h3>
    <p class="text-white mb-0">Text stays readable over the photo.</p>
  </div>
</div>
</Example>

## Card cover

Use `card-cover` for a header with a background photo. It darkens the image with an overlay, so white text on top stays readable whatever the picture looks like. Add `card-cover-blurred` to blur the photo behind that overlay.

<Example>
<div class="row row-cards">
  <div class="col-md-6">
    <div class="card">
      <div class="card-cover text-center text-white" style="background-image: url(/static/photos/book-on-the-grass.jpg)">
        <div class="h1 m-0">Reading list</div>
        <div class="mt-1">12 books this year</div>
      </div>
      <div class="card-body">Standard overlay.</div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-cover card-cover-blurred text-center text-white" style="background-image: url(/static/photos/cup-of-coffee-and-an-open-book.jpg)">
        <div class="h1 m-0">Reading list</div>
        <div class="mt-1">12 books this year</div>
      </div>
      <div class="card-body">Blurred variant.</div>
    </div>
  </div>
</div>
</Example>

## Pills in a card header

Tabs in a card header take `card-header-tabs`. For the pill style, use `card-header-pills` on the same `nav`.

<Example>
<div class="card">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item"><a class="nav-link active" href="#">Overview</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Activity</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
    </ul>
  </div>
  <div class="card-body">Card content</div>
</div>
</Example>

## Image on the trailing side

`card-img-top` rounds the top corners of an image, and `card-img-end` rounds the trailing ones. Use it when the image sits beside the text rather than above it, so its corners follow the card.

<Example>
<div class="card">
  <div class="row row-0">
    <div class="col">
      <div class="card-body">
        <h3 class="card-title">Card with a side image</h3>
        <div class="text-secondary">The image keeps the rounded corner on the trailing edge of the card.</div>
      </div>
    </div>
    <div class="col-4">
      <img src="/static/photos/book-on-the-grass.jpg" class="w-100 h-100 object-cover card-img-end" alt="" />
    </div>
  </div>
</div>
</Example>

## Card action button

Use `card-btn` for a full-width action at the bottom of a card. It gets a top border, centers its content and highlights on hover, so several of them side by side read as one button bar.

<Example>
<div class="card" style="max-width: 20rem">
  <div class="card-body text-center">
    <span class="avatar avatar-xl mb-3" style="background-image: url(/static/avatars/029m.jpg)"></span>
    <div class="fw-medium">Egan Poetz</div>
    <div class="card-meta">Product Manager</div>
  </div>
  <div class="d-flex">
    <a href="#" class="card-btn"><Icon name="mail" class="me-2" /> Email</a>
    <a href="#" class="card-btn"><Icon name="phone" class="me-2" /> Call</a>
  </div>
</div>
</Example>

`card-meta` above is the muted secondary line that goes with a title - a role, a date, an author.

## Rotated card

Add one of the `card-rotate-*` classes to tilt a card slightly. Use it for a stack of cards or a decorative section header, not for content users have to read.

| Class | Tilt |
| --- | --- |
| `card-rotate-start` | towards the start edge |
| `card-rotate-end` | towards the end edge |
| `card-rotate-left` | left, regardless of text direction |
| `card-rotate-right` | right, regardless of text direction |

<Example>
<div class="row row-cards">
  <div class="col-6">
    <div class="card card-rotate-start"><div class="card-body">Rotated to the start</div></div>
  </div>
  <div class="col-6">
    <div class="card card-rotate-end"><div class="card-body">Rotated to the end</div></div>
  </div>
</div>
</Example>

## Code in a card

`card-code` replaces the card body when the card holds a code block. It removes the body padding and the border the highlighter adds, so the code sits flush against the card edges.

<Example>
<div class="card" style="max-width: 24rem">
  <div class="card-header">
    <h3 class="card-title">Card with code</h3>
  </div>
  <div class="card-code">
```scss
.card-footer {
  background: transparent;
}
```
  </div>
</div>
</Example>

Use it instead of `card-body`, not next to it.

## Accessibility

A card is a container, so it has no role of its own. What matters is the content inside it.

- Keep one heading per card and match its level to the page outline. `card-title` only sets the look, so use a real `h2`-`h4` element.
- For a clickable card, wrap the card in a single `a` element (`card-link`) rather than putting a link only on the title. That way the whole card is one tab stop with one accessible name.
- `card-status-*` and `card-stamp` are decoration. Never let a color or an icon be the only carrier of meaning - repeat it in text, for example with a [status](/ui/components/status) or a [badge](/ui/components/badge).
- Give an image inside a card a real `alt` when it carries information, or an empty `alt=""` when it is decorative.