Cards
Compose related content and actions with optional headers, structured content, and flexible footers.
Cards
Cards establish a contained surface with composable header, content, and footer regions. Header and footer are optional; add title, description, and action slots only when the card needs them.
Deployment
Production status for the current release.
HealthyAll regions are responding normally.
Team access
Manage members and workspace permissions.
Two invitations are waiting for a response.
<article class="bs-card bs-card-raised" aria-labelledby="team-card-title">
<header class="bs-card-header">
<h3 class="bs-card-title" id="team-card-title">Team access</h3>
<p class="bs-card-description">Manage members and permissions.</p>
<button class="bs-btn bs-btn-ghost bs-btn-sm bs-card-action" type="button">Settings</button>
</header>
<div class="bs-card-content">
<strong>12 active members</strong>
<p class="bs-card-text bs-mb-0">Two invitations are pending.</p>
</div>
<footer class="bs-card-footer">
<button class="bs-btn bs-btn-primary bs-btn-sm" type="button">Invite member</button>
</footer>
</article>Structure
Use .bs-card-header, .bs-card-content, and .bs-card-footer in that order. Header and footer are optional; content can stand alone.
Header slots
Place .bs-card-title, .bs-card-description, and an optional .bs-card-action directly in the header. The action aligns independently without disconnecting the description from its heading.
Compatibility
.bs-card-body remains a supported padded content region, and .bs-card-text remains available for muted copy. Prefer the explicit content and description names in new structured cards.
Accessibility
Use <article> only for standalone content, connect its heading with aria-labelledby, and keep every action a native link or button. Never nest extra controls inside .bs-card-link.
Content-only card
Header and footer are optional. Use the content region by itself when the card needs one uninterrupted block.
Release notes
A concise summary belongs inside the same content surface.
<article class="bs-card" aria-labelledby="basic-card-title">
<div class="bs-card-content">
<h4 class="bs-card-title" id="basic-card-title">Release notes</h4>
<p class="bs-card-text bs-mb-0">A concise summary belongs inside the same content surface.</p>
</div>
</article>Complete structured card with dividers
Compose an optional header and footer around the content region. Add .bs-card-separated when each region should have a visible divider; the header action and footer controls keep their normal alignment.
Workspace usage
Review current storage and manage plan capacity.
Storage resets on the first day of each month.
<article class="bs-card bs-card-raised bs-card-separated" aria-labelledby="workspace-card-title">
<header class="bs-card-header">
<h4 class="bs-card-title" id="workspace-card-title">Workspace usage</h4>
<p class="bs-card-description">Review current storage and manage plan capacity.</p>
<button class="bs-btn bs-btn-ghost bs-btn-sm bs-card-action" type="button">Manage</button>
</header>
<div class="bs-card-content">
<strong>68 GB of 100 GB</strong>
<p class="bs-card-text bs-mb-0">Storage resets on the first day of each month.</p>
</div>
<footer class="bs-card-footer">
<button class="bs-btn bs-btn-primary bs-btn-sm" type="button">Upgrade plan</button>
<button class="bs-btn bs-btn-secondary bs-btn-sm" type="button">View usage</button>
</footer>
</article>Header and content without a footer
Omit the footer when the card has no bottom actions. Header actions remain real controls and descriptions stay associated with the card heading.
Production deployment
Deployed from main 14 minutes ago.
HealthyAll regions are responding normally and the error rate is below the alert threshold.
<article class="bs-card bs-card-subtle" aria-labelledby="deployment-card-title">
<header class="bs-card-header">
<h4 class="bs-card-title" id="deployment-card-title">Production deployment</h4>
<p class="bs-card-description">Deployed from main 14 minutes ago.</p>
<span class="bs-badge bs-badge-primary bs-card-action">Healthy</span>
</header>
<div class="bs-card-content">
<p class="bs-card-text bs-mb-0">All regions are responding normally and the error rate is below the alert threshold.</p>
</div>
</article>Compact linked card
Use the link modifier when the entire card has one destination. The subtle and compact modifiers create a quiet, dense navigation surface.
<a class="bs-card bs-card-subtle bs-card-compact bs-card-link" href="/docs/components/tables">
<span class="bs-text-xs bs-text-muted">Component guide</span>
<strong>Responsive tables</strong>
<span class="bs-text-sm bs-text-muted">Present structured data without widening the page.</span>
</a>Card API
Cards use one surface with explicit, composable regions. The header and footer are optional; every card can contain only .bs-card-content when no additional structure is needed.
| Class | Purpose |
|---|---|
.bs-card | Surface, border, radius, clipping, and default elevation. |
.bs-card-header | Optional responsive grid for the title, description, and action slots. |
.bs-card-title | Heading slot within a card header or content region. |
.bs-card-description | Muted supporting copy associated with the header title. |
.bs-card-action | Optional header action aligned independently at the inline end. |
.bs-card-content | Primary padded content region; works with or without a header and footer. |
.bs-card-footer | Optional wrapping row for related actions, metadata, or status. |
.bs-card-raised | Stronger shadow for elevated or featured content. |
.bs-card-separated | Adds dividers between adjacent header, content, and footer regions. |
.bs-card-subtle | Quieter surface and border treatment for secondary or nested content. |
.bs-card-compact | Reduces inset spacing consistently across simple or structured card regions. |
.bs-card-link | Makes a single-destination anchor behave and focus like an interactive card surface. |
.bs-card-body | Backward-compatible padded content region. |
.bs-card-text | Backward-compatible muted supporting-copy treatment. |