Data Display

Card

A surface for grouping related content.

stableNo JS requiredhydrateless/card.css

A surface for grouping related content, with optional header, body, and footer regions. CSS-only.

Playground

Live

Starter plan

Everything you need to ship.

Unlimited projects, 5 GB storage, and email support.

$9 / month

Interactive

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
interactive	boolean	false	Add hover/active elevation for clickable cards.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-surface	Card background.
--hl-border	Card border.
--hl-radius-lg	Corner radius.
--hl-shadow-sm	Resting elevation.

Accessibility

• When a whole card is clickable, wrap it in a link or button so it is keyboard reachable.

Related

AvatarA user image with a graceful text fallback.BadgeA small label for statuses, counts, and tags.