Skip to main contentSkip to docs navigation
View on GitHub

Card

Flexible content containers with support for headers, footers, and various content types with consistent spacing and visual styling.

On this page
@layer components
Container queries
Scoped tokens

Introduction

The .card class creates a position: relative flex-column block with a border, border-radius, and a set of CSS custom properties consumed by all sub-elements.

Basic structure

A card is built from .card with one or more sub-elements arranged inside. The card expands to 100% of its container; width is controlled by the grid, sizing utilities, or an inline style attribute.

PlaceholderImage cap

Card title

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

Go somewhere
HTML
<div class="card" style="width: 18rem;">
  <img src="..." class="card-image-top" alt="...">
  <div class="card-body">
    <h3 class="card-title">Card title</h3>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Go somewhere</a>
  </div>
</div>

Content components

Cards compose from a typed set of sub-elements. Each sub-element reads from the card's CSS custom properties, so changes to card-level tokens propagate to all regions consistently.

Content area

The .card-body is the primary padded region. It carries flex: 1 1 auto so it grows to fill available space — the property that pins .card-footer to the bottom when the card has a fixed height. The body is a flex-column container, so block-level elements such as buttons stretch to full width by default; apply .me-auto, .ms-auto, or .mx-auto to control their horizontal alignment.

This is some text within a card body. Go somewhere
HTML
<div class="card" style="width: 18rem;">
  <div class="card-body">
    This is some text within a card body.
    <a href="#" class="button primary me-auto">Go somewhere</a>
  </div>
</div>

The .card-title, .card-subtitle, and .card-link classes apply card-scoped typography tokens. When .card-title and .card-subtitle are adjacent siblings, the spacing between them collapses to zero.

  • .card-title — primary heading within the card
  • .card-subtitle — secondary label or description
  • .card-link — action link; consecutive .card-link elements receive horizontal spacing between them

Card title

Card subtitle

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

Card link

Card subtitle

Card title

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

HTML
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-subtitle">Card subtitle</p>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
  </div>
</div>
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <p class="card-subtitle">Card subtitle</p>
    <h4 class="card-title">Card title</h4>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <div>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
</div>

The .card-header and .card-footer regions are separated from the body by a border.

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Don't miss this.
HTML
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button primary me-auto">Go somewhere</a>
  </div>
</div>
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button primary me-auto">Go somewhere</a>
  </div>
  <div class="card-footer">
    Don't miss this.
  </div>
</div>

Image caps

The .card-image-top class rounds the top two corners; .card-image-bottom rounds the bottom two corners. Place either class directly on the <img> as a direct child of .card.

PlaceholderImage cap

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

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

PlaceholderImage cap
HTML
<div class="card" style="width: 18rem;">
  <img src="..." class="card-image-top" alt="...">
  <div class="card-body">
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <img src="..." class="card-image-bottom" alt="...">
</div>

Inline images

The .card-image class rounds all four corners. Use it for images inside .card-body. When .card-body contains only a .card-image, adjacent body padding collapses so two stacked body regions share no gap between their images.

PlaceholderImage content

Card title

Card subtitle

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

Card title

Card subtitle

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

PlaceholderImage content
HTML
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <img src="..." class="card-image" alt="...">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-subtitle">Card subtitle</p>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card h-100" style="width: 18rem;">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-subtitle">Card subtitle</p>
    <p>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-body">
    <img src="..." class="card-image" alt="...">
  </div>
</div>

Image overlays

The .card-overlay class fills the entire card surface. Place the background image as a direct .card child before .card-overlay in source order; the overlay renders on top of it.

PlaceholderCard image

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

HTML
<div class="card">
  <img src="..." class="card-image" alt="...">
  <div class="card-overlay">
    <h4 class="card-title">Card title</h4>
    <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p><small>Last updated 3 mins ago</small></p>
  </div>
</div>

Content that exceeds the image height will be clipped. Since .card-overlay uses overflow: hidden, there is no scroll or overflow — excess content is silently cut off.

Size variants

The .small and .large modifiers re-declare the padding, gap, and typography CSS custom properties for the card and all sub-elements. A .button inside a .large card without an explicit .small or .medium modifier is promoted to the large button size; inside .small, it is demoted to small.

PlaceholderImage cap

Card title

Card subtitle

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

Go somewhere
PlaceholderImage cap

Card title

Card subtitle

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

Go somewhere
HTML
<div class="card small" style="width: 16rem;">
  <img src="..." class="card-image-top" alt="...">
  <div class="card-body">
    <h3 class="card-title">Card title</h3>
    <p class="card-subtitle">Card subtitle</p>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="button primary me-auto">Go somewhere</a>
  </div>
</div>
<div class="card large" style="width: 22rem;">
  <img src="..." class="card-image-top" alt="...">
  <div class="card-body">
    <h3 class="card-title">Card title</h3>
    <p class="card-subtitle">Card subtitle</p>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="button primary me-auto">Go somewhere</a>
  </div>
</div>

Layout options

Cards have no intrinsic width and expand to fill their container. Width is controlled via the grid, sizing utilities, or inline styles; horizontal layouts switch between stacked and side-by-side using responsive flex utilities; .card-group joins cards edge-to-edge.

Width control

Cards expand to 100% of their container. Three patterns control width:

Grid columns. Wrap each card in a column inside a .row. Breakpoint column classes control how many cards appear per row.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
HTML
<div class="row">
  <div class="small:col-6 mb-medium mb-xsmall-0">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p>With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="button primary me-auto">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="small:col-6">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p>With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="button primary me-auto">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Sizing utilities. Apply .w-75, .w-50, or any sizing utility directly to .card.

Card title

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card title

With supporting text below as a natural lead-in to additional content.

Go somewhere
HTML
<div class="card w-75 mb-medium">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button primary me-auto">Go somewhere</a>
  </div>
</div>
<div class="card w-50">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button primary me-auto">Go somewhere</a>
  </div>
</div>

Inline styles. Set a specific width with a style attribute.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
HTML
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button primary me-auto">Go somewhere</a>
  </div>
</div>

Text alignment

Apply .text-center or .text-end to .card to align all content uniformly, or scope the class to an individual sub-element.

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Don't miss this.
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Don't miss this.
HTML
<div class="row">
  <div class="medium:col-6 mb-medium small:mb-0">
    <div class="card text-center">
      <div class="card-header">
        Featured
      </div>
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p>With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="button primary mx-auto">Go somewhere</a>
      </div>
      <div class="card-footer">
        Don't miss this.
      </div>
    </div>
  </div>
  <div class="medium:col-6">
    <div class="card text-end">
      <div class="card-header">
        Featured
      </div>
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p>With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="button primary ms-auto">Go somewhere</a>
      </div>
      <div class="card-footer">
        Don't miss this.
      </div>
    </div>
  </div>
</div>

Horizontal layout

Apply a responsive flex-row utility (e.g. large:flex-row) directly to .card to switch from a stacked to a side-by-side layout at a breakpoint. Pair responsive image classes on the image to match: .card-image-top rounds the top corners at narrow viewports; .{breakpoint}:card-image-start (or .card-image-end) takes over at wider viewports, rounding the start-side corners.

PlaceholderCard image

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

HTML
<div class="card large:flex-row">
    <div class="large:col-4">
      <img src="..." class="card-image-top large:card-image-start" alt="...">
    </div>
    <div class="card-body large:col-8">
      <h4 class="card-title">Card title</h4>
      <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p><small class="fg-subtle">Last updated 3 mins ago</small></p>
    </div>
</div>

To place the image inside the body region with padding, apply both .card-body and a .{breakpoint}:flex-row utility to the same wrapper element. Nest another .card-body with .p-0 for the content. Adjust the gap between columns with .gap-* utilities.

PlaceholderCard image

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

HTML
<div class="card">
  <div class="card-body large:flex-row gap-medium">
    <div class="large:col-4">
      <img src="..." class="card-image" alt="...">
    </div>
    <div class="large:col-8 card-body p-0">
      <h4 class="card-title">Card title</h4>
      <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="mb-0"><small class="fg-subtle">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Grid layout

The .row-cols-* classes on the row control how many .col-wrapped cards appear per row at each breakpoint. .g-* gutter classes control spacing between cards.

PlaceholderImage cap

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

PlaceholderImage cap

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

PlaceholderImage cap

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

PlaceholderImage cap

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

HTML
<div class="row row-cols-1 medium:row-cols-2 g-large">
  <div class="col">
    <div class="card">
      <img src="..." class="card-image-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p>This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-image-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p>This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-image-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p>This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-image-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p>This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
</div>

Equal heights

Add .h-100 to each card inside a grid row. The grid column stretches to fill the row height; .card-body's flex: 1 1 auto grows the body to fill the remaining space, which pins .card-footer to the bottom.

PlaceholderImage cap

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

PlaceholderImage cap

Card title

This is a short card.

PlaceholderImage cap

Card title

This card has even longer content that will display with equal height.

HTML
<div class="row row-cols-1 medium:row-cols-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-image-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p>This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-image-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p>This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-image-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p>This card has even longer content that will display with equal height.</p>
      </div>
    </div>
  </div>
</div>

With footers, .card-footer aligns to the bottom of each card regardless of body content length.

PlaceholderImage cap

Card title

This card has supporting text below as a natural lead-in.

Last updated 3 mins ago
PlaceholderImage cap

Card title

This card has shorter content.

Last updated 3 mins ago
PlaceholderImage cap

Card title

This card has longer content that shows the equal height action across all cards.

Last updated 3 mins ago
HTML
<div class="row row-cols-1 medium:row-cols-3 g-large">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-image-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p>This card has supporting text below as a natural lead-in.</p>
      </div>
      <div class="card-footer">
        <small class="fg-subtle">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-image-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p>This card has shorter content.</p>
      </div>
      <div class="card-footer">
        <small class="fg-subtle">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-image-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p>This card has longer content that shows the equal height action across all cards.</p>
      </div>
      <div class="card-footer">
        <small class="fg-subtle">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Card groups

.card-group arranges its direct-child cards as an equal-width flexbox row. Adjacent cards share a single border edge and inner corners are squared off. The row layout activates at the small container breakpoint — wrap .card-group in .contains-inline to provide the required container context. Without it, cards stack vertically with spacing controlled by --cx-group-margin. Resize the example below to preview the transition.

PlaceholderImage cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

PlaceholderImage cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

PlaceholderImage cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

HTML
<div class="contains-inline">
  <div class="card-group">
    <div class="card">
      <svg aria-label="Placeholder: Image cap" class="cxd-placeholder-image card-image-top" height="180" preserveAspectRatio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--cx-neutral-bg-evident)" /><text x="50%" y="50%" fill="var(--cx-neutral-fg-subtle)" dy=".3em">Image cap</text></svg>
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p><small class="fg-subtle">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <svg aria-label="Placeholder: Image cap" class="cxd-placeholder-image card-image-top" height="180" preserveAspectRatio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--cx-neutral-bg-evident)" /><text x="50%" y="50%" fill="var(--cx-neutral-fg-subtle)" dy=".3em">Image cap</text></svg>
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p>This card has supporting text below as a natural lead-in to additional content.</p>
        <p><small class="fg-subtle">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <svg aria-label="Placeholder: Image cap" class="cxd-placeholder-image card-image-top" height="180" preserveAspectRatio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--cx-neutral-bg-evident)" /><text x="50%" y="50%" fill="var(--cx-neutral-fg-subtle)" dy=".3em">Image cap</text></svg>
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p><small class="fg-subtle">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Advanced features

Cards integrate with other Chassis components through direct embedding patterns. A .list.flush placed as a direct .card child adapts its borders and corners to adjacent regions automatically; a .nav embedded in .card-header extends the header into a tab or pill navigation frame.

Lists

Embed a .list.flush as a direct child of .card — not inside .card-body.

  • An item
  • A second item
  • The third item
  • Fourth item
HTML
<div class="card" style="width: 18rem;">
  <ul class="list flush">
    <li class="list-item">An item</li>
    <li class="list-item">A second item</li>
    <li class="list-item">The third item</li>
    <li class="list-item">Fourth item</li>
  </ul>
</div>

The card manages borders and rounded corners automatically when the list follows a header or precedes a footer.

Card header
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
Card footer
HTML
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Card header
  </div>
  <ul class="list flush">
    <li class="list-item">An item</li>
    <li class="list-item">A second item</li>
    <li class="list-item">A third item</li>
  </ul>
</div>
<div class="card" style="width: 18rem;">
  <ul class="list flush">
    <li class="list-item">An item</li>
    <li class="list-item">A second item</li>
    <li class="list-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Lists also compose with image caps and card body for richer card layouts.

PlaceholderImage cap

Card title

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

  • An item
  • A second item
  • A third item
Card link Another link
HTML
<div class="card" style="width: 18rem;">
  <img src="..." class="card-image-top" alt="...">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list flush">
    <li class="list-item">An item</li>
    <li class="list-item">A second item</li>
    <li class="list-item">A third item</li>
  </ul>
  <div class="card-footer">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Header navigation

The .card-header-tabs and .card-header-pills modifiers apply negative margins to a nested .nav to compensate for the header's padding and align the nav flush with the header edges. Embed a .nav.nav-tabs or .nav.nav-pills inside .card-header and add the corresponding modifier class. See Nav.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
HTML
<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button primary me-auto">Go somewhere</a>
  </div>
</div>

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
HTML
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button primary mx-auto">Go somewhere</a>
  </div>
</div>

Theming

Cards support the Chassis context color system. Individual regions can also be styled with utility classes for finer-grained control.

Context variants

Add .context and a contextual modifier — .primary, .secondary, etc. — along with an intensity class (.solid, .smooth, .outline, or none for the default) to theme the entire card.

Header

Primary card

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

Header

Primary solid

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

Header

Primary smooth

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

Header

Primary outline

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

HTML
<div class="row row-cols-1 medium:row-cols-2 g-large">
  <div class="col">
    <div class="card context primary h-100">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Primary card</h4>
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card context primary solid h-100">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Primary solid</h4>
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card context primary smooth h-100">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Primary smooth</h4>
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card context primary outline h-100">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Primary outline</h4>
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
</div>

Accessibility tip: Color alone shouldn't convey meaning as it's not perceived by assistive technology users. Ensure clarity through text with adequate contrast, ARIA attributes where needed, and consider using .visually-hidden for screen reader content.

Utility styling

Background-color, foreground-color, and border utility classes target individual card regions independently.

Header

Primary background

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

Footer
Header

Custom text color

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

Footer
HTML
<div class="row row-cols-1 medium:row-cols-2 g-large">
  <div class="col">
    <div class="card border-primary h-100">
      <div class="card-header primary-bg-evident">Header</div>
      <div class="card-body primary-bg-main">
        <h4 class="card-title">Primary background</h4>
        <p>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 primary-bg-even">Footer</div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-header fg-primary border-primary">Header</div>
      <div class="card-body fg-secondary">
        <h4 class="card-title">Custom text color</h4>
        <p>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 fg-subtle primary-border-main">Footer</div>
    </div>
  </div>
</div>

CSS

This component can be customized through Sass variables at compile time.

Custom properties

This component exposes CSS custom properties to control its appearance at runtime.

scss/_card.scss
--padding-y: var(--card-padding-y, #{$card-padding-y});
--padding-x: var(--card-padding-x, #{$card-padding-x});
--gap-y: var(--card-gap-y, #{$card-gap-y});
--gap-x: var(--card-gap-x, #{$card-gap-x});
--header-padding-y: var(--card-header-padding-y, #{$card-header-padding-y});
--header-padding-x: var(--card-header-padding-x, #{$card-header-padding-x});
--footer-padding-y: var(--card-footer-padding-y, #{$card-footer-padding-y});
--footer-padding-x: var(--card-footer-padding-x, #{$card-footer-padding-x});

--border-width: var(--card-border-width, #{$card-border-width});
--border-color: var(--card-border-color, #{$card-border-color});
--border-radius: var(--card-border-radius, #{$card-border-radius});
--inner-border-radius: var(--card-inner-border-radius, #{$card-inner-border-radius});
--box-shadow: var(--card-box-shadow, #{$card-box-shadow});

--fg-color: var(--card-fg-color, #{$card-fg-color});
--bg-color: var(--card-bg-color, #{$card-bg-color});
--title-fg-color: var(--card-title-fg-color, #{$card-title-color});
--subtitle-fg-color: var(--card-subtitle-fg-color, #{$card-subtitle-color});
--header-fg-color: var(--card-header-fg-color, #{$card-header-fg-color});
--header-bg-color: var(--card-header-bg-color, #{$card-header-bg-color});
--footer-fg-color: var(--card-footer-fg-color, #{$card-footer-fg-color});
--footer-bg-color: var(--card-footer-bg-color, #{$card-footer-bg-color});

--header-font-weight: var(--card-header-font-weight, #{$card-header-font-weight});

@include map-font($card-medium-title-font, card-title, title);
@include map-font($card-medium-subtitle-font, card-subtitle, subtitle);
@include map-font($card-medium-body-font, card);

--height: var(--card-heading, #{$card-height});
--group-margin: var(--card-group-margin, #{$card-group-margin});

Size variants declare their own CSS custom property overrides:

scss/_card.scss
--padding-y: var(--card-large-padding-y, #{$card-large-padding-y});
--padding-x: var(--card-large-padding-x, #{$card-large-padding-x});
--header-padding-y: var(--card-large-header-padding-y, #{$card-large-header-padding-y});
--header-padding-x: var(--card-large-header-padding-x, #{$card-large-header-padding-x});
--footer-padding-y: var(--card-large-footer-padding-y, #{$card-large-footer-padding-y});
--footer-padding-x: var(--card-large-footer-padding-x, #{$card-large-footer-padding-x});
--gap-y: var(--card-large-gap-y, #{$card-large-gap-y});
--gap-x: var(--card-large-gap-x, #{$card-large-gap-x});
@include map-font($card-large-title-font, card-large, title);
@include map-font($card-large-subtitle-font, card-large, subtitle);
@include map-font($card-large-body-font, card-large);
scss/_card.scss
--padding-y: var(--card-small-padding-y, #{$card-small-padding-y});
--padding-x: var(--card-small-padding-x, #{$card-small-padding-x});
--header-padding-y: var(--card-small-header-padding-y, #{$card-small-header-padding-y});
--header-padding-x: var(--card-small-header-padding-x, #{$card-small-header-padding-x});
--footer-padding-y: var(--card-small-footer-padding-y, #{$card-small-footer-padding-y});
--footer-padding-x: var(--card-small-footer-padding-x, #{$card-small-footer-padding-x});
--gap-y: var(--card-small-gap-y, #{$card-small-gap-y});
--gap-x: var(--card-small-gap-x, #{$card-small-gap-x});
@include map-font($card-small-title-font, card-small, title);
@include map-font($card-small-subtitle-font, card-small, subtitle);
@include map-font($card-small-body-font, card-small);

Sass variables

This component uses Sass variables in scss/config/_defaults.scss to define its defaults.

scss/config/_defaults.scss
$card-padding-y:                    var(--space-medium);
$card-padding-x:                    var(--space-medium);
$card-header-padding-y:             var(--space-small);
$card-header-padding-x:             var(--padding-x); // card padding-x is used for header
$card-footer-padding-y:             var(--space-small);
$card-footer-padding-x:             var(--padding-x); // card padding-x is used for footer
$card-gap-y:                        var(--space-small); // Space between title and body.
$card-gap-x:                        var(--space-small); // Space between links & buttons.

$card-large-padding-y:              var(--space-large);
$card-large-padding-x:              var(--space-large);
$card-large-header-padding-y:       var(--space-medium);
$card-large-header-padding-x:       var(--padding-x); // card padding-x is used for header
$card-large-footer-padding-y:       var(--space-medium);
$card-large-footer-padding-x:       var(--padding-x); // card padding-x is used for footer
$card-large-gap-y:                  var(--space-medium); // Space between title and body.
$card-large-gap-x:                  var(--space-medium); // Space between links & buttons.

$card-small-padding-y:              var(--space-small);
$card-small-padding-x:              var(--space-small);
$card-small-header-padding-y:       var(--space-xsmall);
$card-small-header-padding-x:       var(--padding-x); // card padding-x is used for header
$card-small-footer-padding-y:       var(--space-xsmall);
$card-small-footer-padding-x:       var(--padding-x); // card padding-x is used for footer
$card-small-gap-y:                  var(--space-xsmall); // Space between title and body.
$card-small-gap-x:                  var(--space-xsmall); // Space between links & buttons.

$card-border-width:                 var(--border-width-medium);
$card-border-color:                 var(--border-subtle);
$card-border-radius:                var(--border-radius-medium);
$card-inner-border-radius:          calc($card-border-radius - $card-border-width);
$card-box-shadow:                   none;

$card-medium-title-font:            $font-context-title-medium;
$card-medium-subtitle-font:         $font-context-label-medium;
$card-medium-body-font:             $font-context-body-medium;

$card-large-title-font:             $font-context-title-large;
$card-large-subtitle-font:          $font-context-label-large;
$card-large-body-font:              $font-context-body-large;

$card-small-title-font:             $font-context-title-small;
$card-small-subtitle-font:          $font-context-label-small;
$card-small-body-font:              $font-context-body-small;

$card-header-font-weight:           var(--font-weight-strong);

$card-fg-color:                     var(--fg-main);
$card-bg-color:                     var(--bg-main);
$card-title-color:                  var(--fg-main);
$card-subtitle-color:               var(--fg-subtle);
$card-header-fg-color:              inherit;
$card-header-bg-color:              inherit;
$card-footer-fg-color:              inherit;
$card-footer-bg-color:              inherit;

$card-height:                       auto;
$card-group-margin:                 $grid-gutter-x * .5;