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
No elevation
No border, no shadow. Used when the surface itself provides sufficient context, such as content within another container.
--card-flat-border: noneExposed 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)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.
Link Cards
A card with href renders a real <a> (mirrors Button's href) — middle-click, focus ring and crawlability come free. Use for navigation tiles like a service directory; use interactive + onclick only for in-page selection.
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)