Card
Last Updated: September 2026Cards group related content on a consistent surface with optional padding and elevation.
Source CodeAnatomy
link- 1Surface
- 2Padding
- 3Children
- 4Render
Variants
linkDefault
Padded surface for nested content.
Floating
Elevated card for overlays and popovers.
Without padding
withPadding={false} when children manage their own spacing.
With typography
Compose heading and body inside the default padded shell.
With actions
Pair content with Button for simple panels.
Usage Guidelines
linkWhen to use
- •To group related content on a surface with consistent padding and elevation.
- •As the shell for dialogs, popovers, and floating panels.
- •When a bordered or floating container clarifies hierarchy.
When not to use
- •For full-page layout — use page structure and Stack instead.
- •When spacing alone is enough — avoid nesting cards inside cards.
- •As a click target without clear interaction — prefer Button or Link.
Use one Card to group a related block of content and actions.
Don't nest Cards inside Cards — hierarchy gets noisy.
Use floating when the card sits above the page (overlays, popovers).
Don't make an entire Card the only interactive affordance without a clear control.
Behaviors
linkSurface options
- •withPadding defaults to true (p-3). Set false for media, tables, or custom inset layouts.
- •floating adds shadow-md for elevated panels.
- •Border and background tokens are always applied; customize further with className.
Composition
- •Card is a presentational div by default — put structure in children (Stack, Typography, Button).
- •render can replace the root element when you need a semantic or polymorphic host.
Sizing
- •Card grows with content; constrain width on a wrapper or via className.
- •Prefer wrapping for fixed demo widths rather than inventing layout props.
Content Guidelines
linkCopy
- •Lead with a short heading, then one supporting sentence.
- •Use synthetic clinic/demo names only — no real patient or site PHI.
Density
- •Keep padding consistent; if content needs flush edges, turn withPadding off once at the root.
- •Avoid packing unrelated sections into a single card — split into separate surfaces.
Accessibility
linkText & Labels
- •Card itself is not interactive — put labels on headings and controls inside.
- •If the card is a dialog surface, naming belongs on the dialog/modal title, not Card.
ARIA attributes
- •Default root is a generic div with no special role.
- •Do not add role="button" to Card; use Button or render a proper control.
Keyboard Support
- •Non-interactive by default — Tab moves to focusable children only.
- •Ensure actions inside the card are keyboard reachable in a logical order.
WCAG Compliance Standards
FAQs
linkWhen should I use withPadding={false}?
When children need flush edges — images, tables, or custom section padding. Otherwise keep the default.
What does floating do?
Adds a medium shadow for elevated surfaces. Pair with overlays/popovers; skip it for flat in-page panels.
Is Card a compound component?
No. There are no Card.Header / Card.Body exports — compose Typography, Stack, and Button as children.