Cards

The .card component and the utility classes you can pair with it — outlines, tints, accent borders, icons, images and shadows — all driven by the same --panel-* tokens described in Styling with Variables.

1. The Card component

.card is a single component with three optional child parts: .card-header, .card-body and .card-footer. None of them are required — a card can just be a .card with plain content inside it — but reach for the three parts whenever a card has distinct title / content / action zones, since each part carries its own spacing and border so the sections don't run into each other.

Card title

This is .card-body. It carries vertical padding only, so it lines up flush with the card's own left/right edges — use it for the main paragraph, list, or form that makes up the card's content.

Action

<div class="card">
  <div class="card-header">
    Card title
  </div>
  <div class="card-body">
    <p>Body content…</p>
  </div>
  <div class="card-footer">
    <a href="#" class="button">Action</a>
  </div>
</div>

Class	What it does	Reads token
`.card`	The container — background, border, radius, shadow and padding all in one class.	`--panel-bg`, `--panel-border`, `--panel-radius`, `--panel-shadow`, `--panel-padding`
`.card-header`	Title/eyebrow zone. Adds a bottom border and bottom spacing, and reads the same heading color/weight tokens as `h1`–`h6` so it looks like a heading even on a plain `div`.	`--heading-font-weight`, `--heading-color`
`.card-body`	Main content zone. Vertical padding only — no side padding, no border — so it sits flush inside the card.	`--default-padding`
`.card-footer`	Action/meta zone. Adds a top border and top spacing to visually separate it from the body — the natural place for buttons, links, or a timestamp.	`--default-padding`
`.card-hover`	Add alongside `.card` for a lift-and-deepen effect on hover — a stronger shadow plus a small upward translate. Good for clickable cards (product, blog, pricing).	—

You don't need all three parts every time. A stat card or an image card is often just .card plus whatever's inside it — see §9 below. Use .card-header/.card-body/.card-footer specifically when a card needs a visible seam between its title, its content, and its action.

Header only

A card with a header and body, no footer — fine when there's no action to take.

No header needed

Skip .card-header entirely when the first line of body copy already reads like a title.

Learn more →

All three parts

Header, body and footer together — the most common shape for a settings panel, plan card, or dashboard widget.

Confirm

2. Outlined cards

A plain .card already has a border — these use the .outline-* utilities instead, which set a CSS outline rather than border, so they layer over a card's own border without fighting it.

outline-color-1

Pairs the card's own panel padding/radius with a brand-color outline.

outline-color-2 rounded

Add .rounded for a softer corner independent of --panel-radius.

outline-grey

Neutral outline for secondary content that shouldn't compete for attention.

3. Background & tint cards

Solid backgrounds (.bg-*) for strong contrast, or soft tints (.bga-*) that mix a brand/status color into the surface at low opacity — reach for .bga-* the way you'd reach for a badge or callout.

bga-color-1

Soft brand tint via color-mix() — no hardcoded hex.

bga-color-2

Soft brand tint via color-mix() — no hardcoded hex.

bg-light-grey

Solid neutral background — good for a card that sits inside an already-white section.

bga-success

Confirmation, completed states, positive metrics.

bga-info

Neutral notices, tips, informational callouts.

bga-danger

Warnings, destructive-action confirmations, errors.

bga-warning

Warnings, destructive-action confirmations, info.

bga-luxury

Luxury, destructive-action confirmations, info.

bga-dark

A bit dark, destructive-action confirmations, info.

bg-gradient white

Gradient background reading --color-1/--color-2 — use light text on top.

bg-gradient-success white

Gradient background reading --color-1/--success — use light text on top.

bg-gradient-info white

Gradient background reading --color-1/--info — use light text on top.

More Gradient Cards

bg-gradient-warning, bg-gradient-luxury, bg-gradient-black, bg-gradient-white

Gradient Cards On Hover: bg-gradient-hover, bg-gradient-success-hover, bg-gradient-danger-hover, bg-gradient-warning-hover, bg-gradient-luxury-hover, bg-gradient-black-hover, bg-gradient-white-hover . Better to use with white-hover

bg-info white

Background reading --info — use light text on top.

bg-success white

Background reading --success — use light text on top.

bg-warning white

Background reading --warning — use light text on top.

More Background Cards

bg-color-1, bg-info, bg-danger, bg-luxury, bg-black, bg-white

Background Cards On Hover: bg-info-hover, bg-success-hover, bg-warning-hover . Better to use with white-hover

4. Accent border cards

To achieve this effect reset the border by adding the classes border-0 border-solid then add required direction and thickness border-[l/r/t/b]-[2/4/8] example border-l-8 and add the color class border-color-* Example border-l-8 border-color-1

border-l-8 border-color-1

Brand-color accent stripe on the leading edge.

border-l-4 border-danger

Same pattern, status color — for alerts inside a card grid.

border-l-2 border-success

Pair with .bga-success below for a filled + accented card.

bga-warning + border-b-8

Tint and accent border sharing one color reads as a single.

bga-info + border-t-8

Same pairing, info status — good for release notes or changelog entries.

bga-luxury + border-r-8

Same pairing, luxury status — for account or billing warnings.

5. Icon cards

Icons sit in .icon-box (padding wrapper) so the SVG itself only needs a size class (.icon-m, .icon-ml…) and a fill class (.icon-color-1-fill, .icon-success-fill…). Add .circle and a .bga-* tint to the wrapper for the "icon in a soft badge" look used across the framework's own feature blocks.

Fast Setup

One stylesheet, no build step — link the CDN file and start writing markup.

Token-Driven

Every card, button and panel reads from the same --panel-* and color tokens.

Zero JavaScript

:checked toggle patterns power menus, tabs and accordions with no script tag.

Responsive by default

Fluid tokens mean this card never needs a breakpoint override.

500+ utility classes

Every card variant above is a recombination of the same utility set.

Free & open source

No dependency, no config file — drop in the stylesheet and build.

6. Image cards

Images inside a card use .img-responsive so they never overflow the card, plus an .aspect-* utility to keep every card in a row the same height regardless of the source photo's proportions.

aspect-4-3

Fixed 4∶3 crop keeps the card's footprint predictable in a grid.

aspect-video

16∶9 crop — the usual choice for blog and article cards.

aspect-square

Square crop — a common fit for product or portfolio thumbnails.

rounded-t

Image sits flush against the card edges; only the top corners round to match the card.

rounded

Image and card share the same padded frame.

circle

Same utility used for avatar-style profile cards.

7. Shadow cards

Shadow utilities live in @layer utilities-advanced, so they always win over a card's own --panel-shadow without needing !important. Add the -hover variant to only apply the shadow on :hover.

shadow

Subtle resting elevation.

shadow-2

Bordered, hard offset.

shadow-3

Bordered, soft diffuse.

shadow-4

Large, dramatic elevation.

shadow-hover

Flat until hovered.

shadow-color-2

Same offset shadow, tinted with --color-1.

shadow-color-3-hover

Tinted diffuse shadow, hover-only.

shadow-none

Strips a card's default --panel-shadow entirely.

8. Example designs

Composed entirely from the pieces above — no new CSS, just different combinations of .card, utilities and the icon/image patterns already on this page.