Card Component Examples

No props

surface-2 · radius-4 · no border

Default output. Nothing passed except slot content.

Border + shadow

border · shadow-3

Still surface-2 bg, but with a default border and shadow-3 elevation.

Band + texture

color-band-bg · bg-tex7 · multiply

Theme-aware band colour with a grain texture blended on top.

Deep surface

surface-4 · shadow-5 · radius-7

Deepest surface level with strong shadow and very rounded corners.

Accent + halftone

color-accent-bg · bg-tex19 · overlay

Accent fill with a fine halftone screen overlaid and a strong border.

Default

Default Card

Uses --surface-2 background. No border, no shadow.

With border

Bordered Card

Border via --border-default.

With shadow

Elevated Card

Shadow via --shadow-3.

Custom background

surface-3 + strong border + larger radius

Mix of props.

Accent background

Uses --color-accent-bg — theme-aware accent fill.

Background image overlay

Texture overlay card

Solid fill + image blended on top via ::before.

With footer actions

Feature Announcement

New composable system

Composable card components styled entirely through design system tokens. Background, border, shadow, and text all respond to light/dark and color themes.

With media

Media Card

Image + header + body + footer

Content paragraph inside the card body.

Feature one
Feature two

Body only

Simple content, no header or footer.