Card

Description

.bp-card is a flexible content container built with display: flex and a vertical column layout. It supports image, header, body, footer, and meta slots. The card is its own container-type: inline-size so inner type scales fluidly with cqi units.

Usage

Default

Semantic color, spacing, and typography tokens that adapt to light and dark mode automatically.

<style>
.demo-card { max-width: 22rem; }
</style>
<div class="bp-card demo-card">
<div class="bp-card__header">
  <h3 class="bp-card__title">Design Tokens</h3>
  <p class="bp-card__meta">Tokens · 5 min read</p>
</div>
<div class="bp-card__body">
  Semantic color, spacing, and typography tokens that adapt to light and dark mode automatically.
</div>
<div class="bp-card__footer">
  <a href="/tokens/tokens/" class="bp-btn bp-btn--sm">View tokens</a>
  <a href="/tokens/browser-support/" class="bp-btn bp-btn--sm bp-btn--ghost">Browser support</a>
</div>
</div>

With image

Accordion, carousel, modal, nav and more — built with modern CSS primitives, no framework required.

<style>
.demo-card { max-width: 22rem; }
</style>
<div class="bp-card demo-card">
<div class="bp-card__image">
  <img src="https://placehold.co/600x200/dbeafe/2563eb?text=Components" alt="Components" />
</div>
<div class="bp-card__header">
  <h3 class="bp-card__title">CSS Components</h3>
  <p class="bp-card__meta">Components · Zero JS</p>
</div>
<div class="bp-card__body">
  Accordion, carousel, modal, nav and more — built with modern CSS primitives, no framework required.
</div>
<div class="bp-card__footer">
  <a href="/components/button/" class="bp-btn bp-btn--sm">Explore</a>
</div>
</div>

Interactive — link card

Use <a> for navigation cards and <button> for action cards. Never use a plain <div> as an interactive element.

<style>
.demo-card { max-width: 22rem; }
a.demo-card { text-decoration: none; color: inherit; }
</style>
<a href="#" class="bp-card bp-card--interactive demo-card">
<div class="bp-card__header">
  <h3 class="bp-card__title">Interactive card</h3>
  <p class="bp-card__meta">Click or focus me</p>
</div>
<div class="bp-card__body">
  Use <code>&lt;a&gt;</code> for navigation cards and <code>&lt;button&gt;</code> for action cards.
  Never use a plain <code>&lt;div&gt;</code> as an interactive element.
</div>
</a>

Horizontal

Content Grid

Named-line CSS grid with full-width, breakout, and content zones.

Learn more

<style>
.demo-card--horizontal { max-width: 32rem; }
.demo-card--horizontal .bp-card__image { width: 40%; }
.demo-card--horizontal .bp-card__image img { height: 100%; object-fit: cover; }
.demo-card__content { display: flex; flex-direction: column; gap: var(--bp-space-3); flex: 1; }
.demo-card__content .bp-btn { align-self: flex-start; }
</style>
<div class="bp-card bp-card--horizontal demo-card--horizontal">
<div class="bp-card__image">
  <img src="https://placehold.co/300x200/dcfce7/16a34a?text=Grid" alt="Grid" />
</div>
<div class="demo-card__content">
  <h3 class="bp-card__title">Content Grid</h3>
  <p class="bp-card__body">Named-line CSS grid with full-width, breakout, and content zones.</p>
  <a href="/tokens/grid/" class="bp-btn bp-btn--sm">Learn more</a>
</div>
</div>

Public API

Variable	Default	Description
`--card-bg`	`var(--bp-color-bg-elevated)`	Background color
`--card-radius`	`var(--bp-radius-lg)`	Border radius
`--card-padding`	`var(--bp-space-6)`	Inner padding
`--card-shadow`	`var(--bp-shadow-md)`	Box shadow
`--card-border`	`1px solid var(--bp-color-border)`	Border

Variants

Class	Description
`bp-card--interactive`	Lift on hover, focus ring on keyboard focus
`bp-card--horizontal`	Row layout with image on the left

Customization example

Custom ghost card

Override via public API — no shadow, transparent background, dashed border.

<style>
.demo-card--ghost {
  max-width: 22rem;
  --card-shadow: none;
  --card-bg: transparent;
  --card-border: 2px dashed var(--bp-color-border);
}
</style>
<div class="bp-card demo-card--ghost">
<div class="bp-card__header">
  <h3 class="bp-card__title">Ghost variant</h3>
</div>
<div class="bp-card__body">Override via public API — no shadow, transparent background, dashed border.</div>
</div>

Accessibility

Use semantic heading levels (h2–h4) for .bp-card__title based on document hierarchy.
.bp-card--interactive must be a <a href> (navigation) or <button> (action) — never a <div tabindex="0">. Generic divs don’t expose role, keyboard activation, or click semantics to assistive technology.
:focus-visible is present on interactive variant — never hidden.

Browser APIs

API	Availability	Used for	Without it	Polyfill
Container Queries	Widely available Baseline 2023	Fluid title and body font-size inside containers	Fixed font-size from tokens	None needed
`cqi` units	Widely available Baseline 2023	Font scales with card’s own width	Fixed font-size	None needed

Internals

--_bg, --_radius, --_padding, --_shadow, --_border — component-private, do not set directly.