Gridparent
Use Grid + Card for responsive card layoutsCard
Container for grouping related content
Setup
import { Card } from '@fragments-sdk/ui';Examples
Default
Standard quiet card surface
Loading preview...
Outlined
Card with border instead of shadow
Loading preview...
Outline
Card with border, using the "outline" alias for "outlined"
Loading preview...
Elevated
Card with prominent shadow for emphasis
Loading preview...
Stat
Compact metric tile for dashboard grids
Loading preview...
Panel
Dashboard panel with a divided header and body-owned spacing
Loading preview...
Interactive
Clickable card surface (root stays a semantic container)
Loading preview...
Section Root
Use the as prop to match the surrounding document semantics
Loading preview...
With Footer
Card with header, body, and footer
Loading preview...
Content Only
Card with just body content
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Card content - use Card.Header, Card.Body, Card.Footer sub-components |
variant | enumdefaultoutlinedoutlineelevatedstatpanel | default | Visual style of the card surface |
padding | enumnonesmmdlg | md | Internal padding size |
as | enumarticledivsection | article | Semantic HTML element for the card root |
style | object | Not set | — |
Usage Guidelines
When to use
- Grouping related pieces of content together
- Creating visual separation between content sections
- Displaying a preview or summary of an item
- Building dashboard widgets or tiles
When not to use
- Simple text content that does not need grouping
- Modal or dialog content (use Dialog component)
- Navigation items (use List or Sidebar patterns)
Best practices
- Use consistent card variants within the same context
- Cards in a grid should have uniform sizing
- Use elevated variant sparingly for emphasis
- Use stat and panel variants for dashboard surfaces so spacing, border, and radius stay consistent
- If a card is clickable, provide clear hover/focus affordances and prefer explicit buttons/links inside the card
Accessibility
- Card is a semantic container (article/div/section); onClick adds keyboard and role="button" behavior, but explicit Button or Link actions are preferred
- Card titles should be appropriate heading levels