Gridparent
Use Grid + Card for responsive card layoutsCard
Container for grouping related content
Setup
import { Card } from '@fragments-sdk/ui';Examples
Default
Standard card with subtle shadow
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...
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 | enumdefaultoutlinedoutlineelevated | 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
- 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 does not automatically add button semantics
- Card titles should be appropriate heading levels