Cards

A flexible surface for grouping related content. Start with a bare wf-card for simple containers, or compose it with header, body, footer, and media subcomponents for richer layouts. Combine with wf-grid or wf-cluster to build card grids.

Basic

A bare wf-card gives you a padded surface. Any content placed inside inherits the card's font and spacing.

A simple card with default padding. Place any content here — text, lists, form fields, or other components.

Card Title

A structured card using wf-card.wf-stack with a header and body.

Footer note

<!-- Bare card -->
<div class="wf-card">Any content</div>

<!-- Structured card -->
<div class="wf-card">
  <div class="wf-card-header">Card Title</div>
  <div class="wf-card-body">Main content area.</div>
  <div class="wf-card-footer">Footer note</div>
</div>

Header, Body & Footer

Use wf-card-header-actions and wf-card-footer-actions to push controls to the trailing edge.

Database backup

The last backup was completed successfully. The next scheduled run is in 4 hours.

72% storage used

Updated 2 min ago

<div class="wf-card">
  <div class="wf-card-header">
    Title
    <div class="wf-card-header-actions">
      <button class="wd-btn wd-btn-ghost wd-btn-icon" type="button">…</button>
    </div>
  </div>
  <div class="wf-card-body">Main content</div>
  <div class="wf-card-footer">
    Updated 2 min ago
    <div class="wf-card-footer-actions">
      <button class="wf-btn wd-btn-secondary wf-btn-sm" type="button">Run now</button>
    </div>
  </div>
</div>

Media

Add a wf-card-media block for image or video content. The image fills the area with object-fit: cover.

Media sizes

Small — 10 rem

wf-card-media-sm

Medium — 14 rem

wf-card-media-md

Large — 18 rem

wf-card-media-lg

<div class="wf-card">
  <div class="wf-card-media wf-card-media-md">
    <img src="cover.jpg" alt="…">
  </div>
  <div class="wf-card-body">Content below the image.</div>
</div>

Horizontal Layout

Add wf-card-horizontal for a side-by-side media + content layout. On viewports narrower than 62 rem the card stacks to vertical automatically.

Horizontal card

Media sits to the leading side, content fills the remaining space. On narrow screens both stack vertically.

<div class="wf-card wf-card-horizontal wf-card-primary">
  <div class="wf-card-media">
    <img src="cover.jpg" alt="…">
  </div>
  <div class="wf-card-body">Content</div>
  <!-- Optional trailing action strip -->
  <div class="wf-card-actions">
    <button class="wd-btn ..." type="button">Adopt</button>
    <button class="wd-btn ..." type="button">Skip</button>
  </div>
</div>

Background Styles

Four background/border variants to match different surface contexts.

Default

Surface bg, border, shadow.

Filled

Subtle bg, no border, no shadow.

Filled Outlined

Subtle bg with the border.

Plain

Transparent bg, no border, no shadow.

Plain Outlined

White bg, border, no shadow.

<div class="wf-card">Default — surface bg, border, shadow</div>
<div class="wf-card wf-card-filled">Filled — subtle bg, no border, no shadow</div>
<div class="wf-card wf-card-filled-outlined">Filled Outlined — subtle bg + border</div>
<div class="wf-card wf-card-plain">Plain — transparent, no border, no shadow</div>
<div class="wf-card wf-card-plain-outlined">Plain Outlined — white bg + border, no shadow</div>

Color Accents

Accent modifiers add a 3 px top border and tint the header background. Combine with wf-card-filled to fill the entire card background.

Semantic accents

Primary

.wf-card-primary

Positive

.wf-card-positive

Negative

.wf-card-negative

Alert

.wf-card-alert

Info

.wf-card-info

<div class="wf-card wf-card-primary">
  <div class="wf-card-header">Primary</div>
  <div class="wf-card-body">Content</div>
</div>

<!-- Combine with filled for a full background tint -->
<div class="wf-card wf-card-filled wf-card-positive">
  …
</div>

Extended palette

Sage (filled)

.wf-card-filled .wf-card-sage

Indigo (filled)

.wf-card-filled .wf-card-indigo

Plum (filled)

.wf-card-filled .wf-card-plu

Earth (filled)

.wf-card-filled .wf-card-earth

Forest (filled)

.wf-card-filled .wf-card-forest

<!-- Available palette accents -->
<!-- wf-card-primary   wf-card-secondary -->
<!-- wf-card-positive  wf-card-negative  -->
<!-- wf-card-alert     wf-card-info      -->
<!-- wf-card-sage      wf-card-indigo    -->
<!-- wf-card-earth     wf-card-forest    -->
<!-- wf-card-plum      wf-card-lavender  -->
<!-- wf-card-dusk      wf-card-light     -->
<!-- wf-card-dark                        -->

Density

Apply a density modifier to the parent card to adjust the padding of all subcomponents simultaneously.

Dense

0.5 rem padding on all sections.

wf-card-dense

Compact

0.75 rem padding on all sections.

wf-card-compact

Default

1.5 rem padding (default).

no modifier

Spacious

2.5 rem padding on all sections.

wf-card-spacious

<div class="wf-card wf-card-dense">…</div>     <!-- 0.5 rem -->
<div class="wf-card wf-stack wf-card-compact">…</div>   <!-- 0.75 rem -->
<div class="wf-card wf-stack">…</div>                   <!-- 1.5 rem (default) -->
<div class="wf-card wf-stack wf-card-spacious">…</div>  <!-- 2.5 rem -->

Hoverable

Add wf-card-hoverable to any card to show a lift effect on hover. Use on an <a> element to make the whole card a link.

Clickable card

Hover to see the lift effect. The entire card is a link.

Hoverable div

Works on any element, not just links.

<!-- Entire card as a link -->
<a class="wf-card wf-card-hoverable" href="/page">
  <div class="wf-card-media wf-card-media-sm">
    <img src="cover.jpg" alt="…">
  </div>
  <div class="wf-card-body">Clickable card</div>
</a>

Loading state

Use .wf-loading from wf-utilities.css directly on the card to overlay a spinner. Works with any appearance or color modifier.

Database backup

The last backup was completed successfully. The next scheduled run is in 4 hours.

72% storage used

Updated 2 min ago

<div class="wf-card wf-loading ...">
    <! -- ... -->
</div>

Custom Properties

Property	Default	Description
--_card-spacing	1.5rem	Base padding is applied to the card itself and to all subcomponents.
--space-sm	0.5rem	Padding used by wf-card-dense.
--space-md	0.75rem	Padding used by wf-card-compact.
--space-lg	2.5rem	Padding used by wf-card-spacious.

Class Reference

All modifier classes available on .wf-card

Class	Type	Description
wf-card	Base	Card surface with border, shadow, radius, and default 1.5 rem padding. Add wf-stack to enable subcomponent layout.
wf-card-header / -body / -footer	Structure	Structured layout sections. Header and footer have a dividing border. Requires wf-card.wf-stack on the parent.
wf-card-header-actions / wf-card-footer-actions	Structure	Action cluster pushed to the far end of the header or footer via margin-inline-start: auto.
wf-card-media	Structure	Image or video area. Add a size modifier to fix the height. Combine with wf-flex-1 to fill remaining vertical space.
wf-card-media-sm / -md / -lg	Size	Fixed media height: 10 rem / 14 rem / 18 rem. On horizontal cards these set a stable column width instead.
wf-card-actions	Structure	Vertical action strip used inside horizontal cards. Gets a leading border separator automatically.
wf-card-dense / -compact / -spacious	Density	Overrides padding on all sub-components: 0.5 rem / 0.75 rem / 2.5 rem.
wf-card-filled / -filled-outlined / -plain / -plain-outlined	Style	Background and border variants. filled uses the subtle surface color. plain is fully transparent.
wf-card-hoverable	Interaction	Adds a lift transition on hover — raised shadow and a 2px upward translate. Use on <a> or any clickable card.
wf-card-horizontal	Layout	Side-by-side media plus body layout. Stacks to vertical on viewports narrower than 62 rems.
wf-card-*	Accent	Top border accent. Also tints the header background with the matching inverted color. primary · secondary · positive · negative · alert · info · sage · indigo · earth · forest · plum · lavender · dusk · light · dark Combine with wf-card-filled for a full background fill.