Card
A card is a contained surface that groups related information and actions about a single subject, making content easy to scan and interact with.
The Card component wraps MUI's Card and works with Sistent's theming out of the box. Here are the most common usage patterns.
Basic Card
A basic card with some content inside. By default it uses the elevated style with a subtle shadow.
Simple card content
Outlined Card
Use variant="outlined" to get a card with a border instead of a shadow. Useful when the background is already elevated or when you want a lighter visual style.
Outlined card content
Elevation
The elevation prop controls shadow depth. Values go from 0 (flat) to 24 (maximum depth). Most cards in practice sit between 1 and 8.
Square Corners
Cards have rounded corners by default. Set square to true to remove the rounding for a more geometric look.
Clickable Card
To make the entire card interactive, add an onClick handler and update the cursor style. This pattern is common in grid layouts where each card is a navigation target.
Click anywhere on this card
Card with Header and Actions
A common real-world pattern — a card with a title, a short description, and action buttons at the bottom.
Card Title
A short description about what this card represents and why it matters.
