Skip to main content Skip to docs navigation
View on GitHub

Cards

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

On this page

Overview

Cards are versatile content containers that help organize and present information in a clean, structured format. Chassis cards support various content types, contextual styling options, and layout patterns to meet diverse interface needs. They provide consistent spacing and visual hierarchy through customizable headers, footers, and content areas.

Basic example

Cards in Chassis are minimal yet powerful, providing a foundation for various content display needs. Built with flexbox, they integrate seamlessly with other Chassis components and utility classes.

Here's a basic card example demonstrating the core structure with mixed content. By default, cards expand to fill their container's width, but can be easily sized using sizing utilities or custom CSS.

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-content">
    <h5 class="card-title">Card title</h5>
    <p class="card-body">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">Go somewhere</a>
  </div>
</div>

Content structure

Chassis cards support a variety of content types and structures. Each element has a specific role in creating well-organized, visually consistent information displays.

Content area

The .card-content element is the primary building block of a card, providing properly padded space for your content.

This is some text within a card body.
html 
<div class="card" style="width: 18rem;">
  <div class="card-content">
    This is some text within a card body.
  </div>
</div>

Titles, text, and links

Create proper text hierarchy using these card text classes:

  • .card-title - For primary headings within cards
  • .card-subtitle - For secondary text or descriptions
  • .card-body - For main content and descriptive text
  • .card-link - For action links with appropriate spacing

When these elements are placed within a .card-content container, they automatically receive proper spacing and alignment.

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.

Card link Another link
html 
<div class="row">
  <div class="medium:col-6 mb-medium small:mb-0">
    <div class="card">
      <div class="card-content">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle">Card subtitle</h6>
        <p class="card-body">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>
  <div class="medium:col-6">
    <div class="card">
      <div class="card-content">
        <p class="card-subtitle">Card subtitle</p>
        <h5 class="card-title">Card title</h5>
        <p class="card-body">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>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
  </div>
</div>

Add optional headers and footers to enhance card organization.

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="row">
  <div class="medium:col-6 mb-medium small:mb-0">
    <div class="card">
      <div class="card-header">
        Featured
      </div>
      <div class="card-content">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-body">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="button primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="medium:col-6">
    <div class="card">
      <div class="card-content">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-body">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="button primary">Go somewhere</a>
      </div>
      <div class="card-footer">
        Don't miss this.
      </div>
    </div>
  </div>
</div>
Featured
Special title treatment

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

Go somewhere
2 days ago
html 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-content">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-body">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button primary">Go somewhere</a>
  </div>
  <div class="card-footer fg-subtle">
    2 days ago
  </div>
</div>

Image caps

Use .card-image-top and .card-image-bottom to add images that match the card's border radius at the top or bottom.

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="row">
  <div class="medium:col-6 mb-medium small:mb-0">
    <div class="card">
      <img src="..." class="card-image-top" alt="...">
      <div class="card-content">
        <p class="card-body">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="medium:col-6">
    <div class="card">
      <div class="card-content">
        <p class="card-body">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>
  </div>
</div>

Image overlays

Create image backgrounds with text overlays using the .card-overlay class.

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 dim-subtle fg-inverse">
    <h5 class="card-title">Card title</h5>
    <p class="card-body">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="card-body"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

Note that content should not be larger than the height of the image. Since .card-overlay has overflow: hidden, content will be clipped if it is larger than the image.

Image contents

Use .card-image within .card-content for proper spacing around 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="row">
  <div class="medium:col-6 mb-medium small:mb-0">
    <div class="card">
      <div class="card-content">
        <img src="..." class="card-image" alt="...">
      </div>
      <div class="card-content">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle">Card subtitle</h6>
        <p class="card-body">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="medium:col-6">
    <div class="card h-100">
      <div class="card-content">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle">Card subtitle</h6>
        <p class="card-body">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-content">
        <img src="..." class="card-image" alt="...">
      </div>
    </div>
  </div>
</div>

List groups

Create lists of content in a card with flush list groups.

  • An item
  • A second item
  • The third item
  • Fourth item
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group 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>
Card header
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
Card footer
html 
<div class="row">
  <div class="medium:col-6 mb-medium small:mb-0">
    <div class="card">
      <div class="card-header">
        Card header
      </div>
      <ul class="list-group 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>
  <div class="medium:col-6">
    <div class="card">
      <ul class="list-group 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>
  </div>
</div>

Combined elements

Mix multiple content types to create complex card layouts. Below is an example combining images, text elements, and a list group.

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-content">
    <h5 class="card-title">Card title</h5>
    <p class="card-body">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-group 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-content">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Size variants

Cards have .small and .large variants in addition to the default size. These adjust font-size and spacing to create compact cards or emphasize content.

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="row">
  <div class="medium:col-5 mb-medium small:mb-0">
    <div class="card small">
      <img src="..." class="card-image-top" alt="...">
      <div class="card-content">
        <h5 class="card-title">Card title</h5>
        <h5 class="card-subtitle">Card subtitle</h5>
        <p class="card-body">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">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="medium:col-7">
    <div class="card large">
      <img src="..." class="card-image-top" alt="...">
      <div class="card-content">
        <h5 class="card-title">Card title</h5>
        <h5 class="card-subtitle">Card subtitle</h5>
        <p class="card-body">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">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Card width

Cards have no specific width by default and will expand to 100% of their container. Use grid classes, utilities, or custom CSS to control card width.

Using grid markup

Wrap cards in columns and rows using the grid system.

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-content">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-body">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="button primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="small:col-6">
    <div class="card">
      <div class="card-content">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-body">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="button primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Using utilities

Apply sizing utilities to control a card's width.

Card title

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

Button
Card title

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

Button
html 
<div class="card w-75 mb-medium">
  <div class="card-content">
    <h5 class="card-title">Card title</h5>
    <p class="card-body">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button primary">Button</a>
  </div>
</div>
<div class="card w-50">
  <div class="card-content">
    <h5 class="card-title">Card title</h5>
    <p class="card-body">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button primary">Button</a>
  </div>
</div>

Using custom CSS

Use inline styles or custom CSS to set specific card widths.

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-content">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-body">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button primary">Go somewhere</a>
  </div>
</div>

Text alignment

Change card text alignment using text utility classes.

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="medium:col-6 mb-medium small:mb-0">
    <div class="card text-center">
      <div class="card-content">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-body">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="button primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="medium:col-6">
    <div class="card text-end">
      <div class="card-content">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-body">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="button primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Add navigation components to card headers for additional functionality.

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-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-content">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-body">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button primary">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-content">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-body">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button primary">Go somewhere</a>
  </div>
</div>

Horizontal cards

Create horizontal cards using the grid system with responsive behavior. Layouts adapt to different screen sizes while maintaining proper image spacing and border radius.

Place images in a separate column outside the content area using specific classes for different screen sizes. Use .card-image-top with d-block medium:d-none for mobile displays and .card-image-start with d-none medium:d-block for larger screens to create a clean separation between image and content:

PlaceholderCard image 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 mb-medium">
  <div class="row g-0">
    <div class="medium:col-4">
      <!-- Mobile image (shown only on small screens) -->
      <img src="..." class="card-image-top d-block medium:d-none" alt="...">
      <!-- Desktop image (shown only on medium screens and above) -->
      <img src="..." class="card-image-start h-100 d-none medium:d-block" alt="...">
    </div>
    <div class="medium:col-8 card-content">
      <h5 class="card-title">Card title</h5>
      <p class="card-body">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="card-body"><small class="fg-subtle">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Integrate images directly within the card content area by wrapping them in a .card-content container for both mobile and desktop layouts. The .card-content container maintains spacing while .card-image preserves proper border radius:

PlaceholderCard image
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 mb-medium">
  <div class="row g-0">
    <!-- Mobile image container (shown only on small screens) -->
    <div class="d-block medium:d-none card-content">
      <img src="..." class="card-image" alt="...">
    </div>
    <!-- Desktop image container (shown only on medium screens and above) -->
    <div class="medium:col-4 d-none medium:d-block card-content">
      <img src="..." class="card-image h-100" alt="...">
    </div>
    <div class="medium:col-8 card-content">
      <h5 class="card-title">Card title</h5>
      <p class="card-body">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="card-body"><small class="fg-subtle">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Apply aria-hidden="true" to one of the images in horizontal cards to improve accessibility, as the same image is being repeated for different screen sizes. This prevents screen readers from announcing the same image content multiple times.

Card layouts

Chassis offers several options for arranging multiple cards on a page.

Grid cards

Use the grid system's .row-cols-* classes to control how many cards appear per row.

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-content">
        <h5 class="card-title">Card title</h5>
        <p class="card-body">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-content">
        <h5 class="card-title">Card title</h5>
        <p class="card-body">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-content">
        <h5 class="card-title">Card title</h5>
        <p class="card-body">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-content">
        <h5 class="card-title">Card title</h5>
        <p class="card-body">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 cards to equalize their heights regardless of content length.

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-content">
        <h5 class="card-title">Card title</h5>
        <p class="card-body">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-content">
        <h5 class="card-title">Card title</h5>
        <p class="card-body">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-content">
        <h5 class="card-title">Card title</h5>
        <p class="card-body">This card has even longer content that will display with equal height.</p>
      </div>
    </div>
  </div>
</div>

Card footers will automatically align at the bottom with this approach.

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-content">
        <h5 class="card-title">Card title</h5>
        <p class="card-body">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-content">
        <h5 class="card-title">Card title</h5>
        <p class="card-body">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-content">
        <h5 class="card-title">Card title</h5>
        <p class="card-body">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

Use .card-group to create a series of connected cards with equal dimensions. Card groups use flexbox to create attached elements with uniform width and height.

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="card-group">
  <div class="card">
    <img src="..." class="card-image-top" alt="...">
    <div class="card-content">
      <h5 class="card-title">Card title</h5>
      <p class="card-body">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
      <p class="card-body"><small class="fg-subtle">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-image-top" alt="...">
    <div class="card-content">
      <h5 class="card-title">Card title</h5>
      <p class="card-body">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-body"><small class="fg-subtle">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-image-top" alt="...">
    <div class="card-content">
      <h5 class="card-title">Card title</h5>
      <p class="card-body">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
      <p class="card-body"><small class="fg-subtle">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Style variations

Chassis cards support various styling options to match your design needs.

Context classes

Use context classes with cards for consistent color theming. Add .context along with a contextual class like .primary to apply themed styles.

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-content">
        <h5 class="card-title">Primary card</h5>
        <p class="card-body">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-content">
        <h5 class="card-title">Primary solid</h5>
        <p class="card-body">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-content">
        <h5 class="card-title">Primary smooth</h5>
        <p class="card-body">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-content">
        <h5 class="card-title">Primary outline</h5>
        <p class="card-body">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 classes

You can also style card sections independently using utility classes.

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-content primary-bg-main">
        <h5 class="card-title">Primary background</h5>
        <p class="card-body">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-content fg-secondary">
        <h5 class="card-title">Custom text color</h5>
        <p class="card-body">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 using CSS variables, allowing for styles to be modified dynamically on the page. These CSS variables are part of Chassis CSS's design token system, giving design teams control over component appearance. See the design tokens page for more details.

Custom properties

These CSS variables control the component's appearance and can be modified dynamically on the page. Components use cascading variables, allowing seamless variations in size, color, and style without redundant style declarations through component inheritance and the context class system.

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

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

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

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

Sass variables

These Sass variables are also exposed as CSS custom properties using the --cx- prefix. A Sass variable $variable-name becomes available as --cx-variable-name in CSS, allowing for styles to be modified dynamically on the page. See the context components page for more details.

scss/_variables.scss 
$card-padding-y:                    var(--#{$prefix}space-medium);
$card-padding-x:                    var(--#{$prefix}space-medium);
$card-header-padding-y:             var(--#{$prefix}space-xsmall);
$card-header-padding-x:             $card-padding-x;
$card-footer-padding-y:             var(--#{$prefix}space-xsmall);
$card-footer-padding-x:             $card-padding-x;
$card-gap-y:                        var(--#{$prefix}space-xsmall); // Space between title and body.
$card-gap-x:                        var(--#{$prefix}space-small); // Space between links & buttons.

$card-large-padding-y:              var(--#{$prefix}space-large);
$card-large-padding-x:              var(--#{$prefix}space-large);
$card-large-header-padding-y:       var(--#{$prefix}space-small);
$card-large-header-padding-x:       $card-large-padding-x;
$card-large-footer-padding-y:       var(--#{$prefix}space-small);
$card-large-footer-padding-x:       $card-large-padding-x;
$card-large-gap-y:                  var(--#{$prefix}space-small); // Space between title and body.
$card-large-gap-x:                  var(--#{$prefix}space-medium); // Space between links & buttons.

$card-small-padding-y:              var(--#{$prefix}space-small);
$card-small-padding-x:              var(--#{$prefix}space-small);
$card-small-header-padding-y:       var(--#{$prefix}space-2xsmall);
$card-small-header-padding-x:       $card-small-padding-x;
$card-small-footer-padding-y:       var(--#{$prefix}space-2xsmall);
$card-small-footer-padding-x:       $card-small-padding-x;
$card-small-gap-y:                  var(--#{$prefix}space-2xsmall); // Space between title and body.
$card-small-gap-x:                  var(--#{$prefix}space-xsmall); // Space between links & buttons.

$card-border-width:                 var(--#{$prefix}border-width-medium);
$card-border-color:                 var(--#{$prefix}border-subtle);
$card-border-radius:                var(--#{$prefix}border-radius-medium);
$card-inner-border-radius:          #{calc($card-border-radius - $card-border-width)};
$card-box-shadow:                   null;

// Extend context font classes for consistent card typography.
// Set to null to use the element's default typography.
$card-title-font-extend-class:      font-title;
$card-subtitle-font-extend-class:   font-label;
$card-body-font-extend-class:       font-body;

$card-title-color:                  var(--#{$prefix}fg-main);
$card-subtitle-color:               var(--#{$prefix}fg-subtle);
$card-header-fg-color:              inherit;
$card-header-bg-color:              inherit;
$card-fg-color:                     var(--#{$prefix}fg-main);
$card-bg-color:                     var(--#{$prefix}bg-main);

$card-height:                       null;
$card-group-margin:                 $grid-gutter-width * .5;