Card

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.

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.

This is some text within a card body.

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

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.

This is some text within a card body.

<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>

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.

Card title

This is some text within a card body.

Card title

This is some text within a card body.

<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>

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.

Card with title and image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

<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>

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.

How do you know she is a witch?

Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...

Maryjo Lebarree

3 days ago

<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">
          <!-- Download SVG icon from http://tabler.io/icons/icon/heart -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

Row deck

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

Short content

Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Short content

<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>

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.

Shut up!

Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...

Egan Poetz

3 days ago

<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">
              <!-- Download SVG icon from http://tabler.io/icons/icon/heart -->
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
                <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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.

Card with a stamp

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur.

<div class="card">
  <div class="card-stamp">
    <div class="card-stamp-icon bg-yellow">
      <!-- Download SVG icon from http://tabler.io/icons/icon/bell -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
        <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
        <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
      </svg>
    </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>

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.

Large stamp

The large stamp is a good fit for banners and wide cards.

Stamp on a color card

Use a white circle with a colored icon on a card with a background color.

<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">
          <!-- Download SVG icon from http://tabler.io/icons/icon/ghost -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" />
            <path d="M10 10l.01 0" />
            <path d="M14 10l.01 0" />
            <path d="M10 14a3.5 3.5 0 0 0 4 0" />
          </svg>
        </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">
          <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />
          </svg>
        </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>

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.

Stacked card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

<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>

Tabbed card

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

Content of tab #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

Content of tab #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

Content of tab #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

Content of tab #4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

<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>

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.

Top status

Bottom status

Side status

<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>

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.

Storage

484 GB of 512 GB used

<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>

Card actions

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

Team members

Invite

Invite a teammate to this project.

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Team members</h3>
    <div class="card-actions">
      <a href="#" class="btn btn-primary">
        <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M12 5l0 14" />
          <path d="M5 12l14 0" />
        </svg> Invite
      </a>
    </div>
  </div>
  <div class="card-body">Invite a teammate to this project.</div>
</div>

Card subtitle

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

Reports

Monthly summary

Every report from the last 30 days.

<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>

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.

Borderless

Dashed

Add new

<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">
        <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M12 5l0 14" />
          <path d="M5 12l14 0" />
        </svg> Add new
      </div>
    </div>
  </div>
</div>

Header and footer variants

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

Invoice #4321

Paid on 12 May.

Download PDF

<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>

Scrollable body

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

Changelog

Fixed the dropdown position inside a card.

Added a dark variant to the image overlay.

Improved the contrast of muted text.

Removed the unused card options markup.

Documented the scrollable card body.

<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>

Table in a card

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

Invoices

Number	Status
#4321	Paid
#4322	Pending

<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>

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.

Lifts on hover

card-link-pop

Tilts on hover

card-link-rotate

<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>

Card states

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

Active card

Inactive card

<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>

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.

Working from home

Text stays readable over the photo.

<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>

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.

Reading list

12 books this year

Standard overlay.

Reading list

12 books this year

Blurred variant.

<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>

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.

Card content

<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>

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.

Card with a side image

The image keeps the rounded corner on the trailing edge of the card.

<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>

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.

Egan Poetz

Product Manager

Email Call

<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">
      <!-- Download SVG icon from http://tabler.io/icons/icon/mail -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon me-2">
        <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" />
        <path d="M3 7l9 6l9 -6" />
      </svg> Email
    </a>
    <a href="#" class="card-btn">
      <!-- Download SVG icon from http://tabler.io/icons/icon/phone -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon me-2">
        <path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />
      </svg> Call
    </a>
  </div>
</div>

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

Rotated to the start

Rotated to the end

<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>

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.

Card with code

.card-footer {
  background: transparent;
}

<div class="card" style="max-width: 24rem">
  <div class="card-header">
    <h3 class="card-title">Card with code</h3>
  </div>
  <div class="card-code">
    <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="scss"><code><span class="line"><span style="color:#B392F0">.card-footer</span><span style="color:#E1E4E8"> {</span></span>
<span class="line"><span style="color:#79B8FF">  background</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">transparent</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#E1E4E8">}</span></span></code></pre>
  </div>
</div>

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 or a badge.
Give an image inside a card a real alt when it carries information, or an empty alt="" when it is decorative.

SCSS variables

Use these SCSS variables to customize cards. The default values are:

$card-spacer-y: 1.25rem;
$card-spacer-x: 1.25rem;
$card-title-spacer-y: 1.25rem;
$card-title-color: null;
$card-subtitle-color: null;
$card-border-width: var(--border-width);
$card-border-color: var(--border-color-translucent);
$card-border-radius: var(--border-radius-lg);
$card-box-shadow: var(--shadow-card);
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);

$card-cap-padding-y: $card-spacer-y;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: var(--bg-surface-tertiary);
$card-cap-color: inherit;
$card-header-bg: transparent;
$card-footer-bg: null;
$card-height: null;
$card-color: inherit;
$card-bg: var(--bg-surface);
$card-img-overlay-padding: $spacer;
$card-group-margin: 1.5rem;

$card-status-size: 3px;
// The strip sits on top of the card border, so it is pulled out by the border width
$card-status-offset: calc(-1 * var(--card-border-width));

$card-stamp-opacity: 0.2;

$card-ribbon-margin: 0.25rem;
$card-ribbon-border-radius: var(--border-radius);
$card-ribbon-font-size: $h6-font-size;
$card-ribbon-icon-size: $icon-size;

$card-header-tabs-bg: var(--bg-surface-tertiary);

$cards-grid-gap: var(--page-padding);
$cards-grid-breakpoint: lg;
$card-stamp-size: 7rem;
$card-stamp-size-lg: 13rem;
$card-stacked-offset: 0.25rem;
$card-actions-gutter: 0.5rem;
$card-header-pills-margin: 0.5rem;
$card-progress-height: 0.25rem;
$card-title-margin-bottom: 1rem;
$card-title-line-height: 1.5rem;
$card-subtitle-margin-start: 0.25rem;
$card-body-padding-sm: 1rem;
$card-body-padding-md: 2.5rem;
$card-body-padding-lg: 2rem;
$card-body-padding-lg-up: 4rem;
$card-options-top: 1.5rem;
$card-options-inset: 0.75rem;
$card-options-link-min-width: 1rem;
$card-options-link-margin-start: 0.25rem;
$card-avatar-height: 3.5rem;
$card-avatar-ring-width: 0.25rem;

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

`card`	component	Container element
`card-header`	part	Title bar at the top
`card-title`	part	Heading, inside the header or the body
`card-subtitle`	part	Small label above the title
`card-body`	part	Content area
`card-footer`	part	Row at the bottom
`card-meta`	part	Muted secondary line, for a role or a date
`card-actions`	part	Slot for controls on the trailing edge of the header
`card-btn`	part	Full width action along the bottom edge
`card-img-top`	part	Image above the body; card-img-end rounds the trailing corners instead
`card-img-overlay`	part	Content laid over an image; add card-img-overlay-dark for a scrim
`card-cover`	part	Header with a background photo and an overlay; card-cover-blurred blurs it
`card-stamp`	part	Large decorative mark in the corner
`card-status-top`	part	Colored bar on an edge; also -bottom and -start
`card-progress`	part	Progress bar attached to the card edge
`card-tabs`	part	Wrapper for a card whose header is a row of tabs
`card-header-tabs`	part	Tabs inside the header; card-header-pills for the pill style
`card-table`	part	Table that sits flush inside the card
`card-code`	part	Replaces the body for a code block, removing the padding
`card-list-group`	part	List group that sits flush inside the card
`card-borderless`	style	Removes the border
`card-transparent`	style	Removes the background and the border
`card-dashed`	style	Dashed border, for an empty or a placeholder card
`card-stacked`	modifier	Draws a second card behind this one
`card-rotate-start`	modifier	Tilts the card; also -end, -left and -right
`card-body-scrollable`	modifier	Scrolls the body instead of growing the card
`card-active`	behavior	Marks the card as selected
`card-inactive`	behavior	Dims the card
`card-link`	behavior	Whole card is a link; -pop and -rotate add a hover effect
`card-sm`	size	Tighter padding
`card-md`	size	Default padding
`card-lg`	size	Roomier padding

Menu

Card

Default card

Card padding

Card with title

Card title

Card title

Card with title and image

Card with title and image

Blog post card

How do you know she is a witch?

Row deck

Post card with aside image

Shut up!

Card stamp

Card with a stamp

Card stamp size and color

Large stamp

Stamp on a color card

Stacked card

Stacked card

Tabbed card

Card status

Card progress

Storage

Card actions

Team members

Card subtitle

Monthly summary

Card surfaces

Header and footer variants

Invoice #4321

Scrollable body

Changelog

Table in a card

Invoices

Clickable card

Lifts on hover

Tilts on hover

Card states

Image overlay

Working from home

Card cover

Pills in a card header

Image on the trailing side

Card with a side image

Card action button

Rotated card

Code in a card

Card with code

Accessibility

SCSS variables

Class reference

Related

On this page

130 sleek illustrations for your startup's visual identity.