| name | Card |
|---|---|
| title | Card |
| published | true |
| component | card |
| description | A card is a contained surface that groups related information and actions about a single subject, making content easy to scan and interact with. |
import { Card } from "@sistent/sistent";
Cards are versatile containers that bring together content and actions around a single topic. They give users a clean, scannable way to browse and interact with information — whether that's a product, a profile, a post, or anything in between. Cards can live in grids, lists, or standalone layouts, and they scale well across screen sizes.
Cards come in a few configurations depending on how much visual weight and interactivity you need. Choosing the right one helps keep the interface consistent and easy to navigate.
The default card type. It uses a drop shadow to sit above the background, creating a sense of depth. This is the most common type and works well for content-heavy layouts where you need clear separation between items.
Elevated Card
An outlined card drops the shadow and uses a border instead. It's a good pick when you want a lighter look, or when the background is already elevated and adding more depth would feel cluttered.
Outlined Card
The elevation prop lets you control how prominent a card feels. Values range from 0 (flat, no shadow) all the way up to 24 (maximum depth). Most cards in practice sit between 1 and 8 — high enough to stand out without feeling heavy.
Cards can be made clickable by wrapping them in an action area or by setting the onClick handler directly. When a card is interactive, it should have a clear hover and focus state so users know it's actionable.
Use a clickable card when the entire surface should trigger a navigation or action. This is common in grids where each card represents a destination — like a product page or a settings section.
Click me
Not every card needs to be clickable. When a card is purely informational — like a stats panel or a summary block — it should not have hover effects or pointer cursors, since those signal interactivity that doesn't exist.
By default, cards have rounded corners. If you need a more geometric, grid-aligned look, you can use the square prop to remove the rounding entirely.
Rounded (default)
Square corners