Card

Surface container with three variants: flat, bordered (default), and elevated. Content-agnostic — designed to hold any content. Bordered is the default, following the "exposed mechanism" philosophy.

Variants

FLAT

No elevation

No border, no shadow. Used when the surface itself provides sufficient context, such as content within another container.

--card-flat-border: none

BORDERED (DEFAULT)

Exposed structure

The default. A 1px border that makes the card's boundaries visible. This is the "exposed mechanism" — structure is shown, not implied.

--card-bordered-border: var(--elevation-border)

ELEVATED

Floating

Warm shadow to indicate floating above the surface. Reserved for cards that need to feel lifted — feature highlights, promotional content.

--card-elevated-shadow: var(--elevation-raised)

Interactive States

Hover and click these cards to see interactive states. Click to select/deselect.

DEFAULT

Project Alpha

Click to select this card. Hover to see the interactive border state.

12 tasks Updated 2h ago

DEFAULT

Project Beta

Another selectable card. The selected state uses the accent color border.

8 tasks Updated 5h ago

DEFAULT

Project Gamma

Third selectable card demonstrates that selection is exclusive per this demo.

3 tasks Updated 1d ago

Loading Skeleton

TOKEN REFERENCE

Cards use component tokens from components.css:

--card-radius: var(--radius-md) (4px)--card-padding: var(--space-lg) (24px)--card-bg: var(--color-surface)--card-bordered-border: var(--elevation-border)--card-interactive-hover-border: var(--elevation-border-strong)--card-selected-border-color: var(--color-accent)