Card and section
Cards are the default container. Title and status bars, inset wells, and the rare section.
Basic
Use a card for a small group of related content, such as a feature, a plan, a setting, or a stat. A header holds the title, and a footer holds the actions.
Session replay
Watch recordings of real user sessions to see where people get stuck.
Appearances
Use glass (the default) for most cards. Use solid when the wallpaper must not show through, such as behind dense data. Use dashed for a later or optional step, and say so in the text.
Glass
The default. Use it for most content.
Hogflix
A nested card.
Solid
Opaque. Use it behind dense data.
Hogflix
A nested card.
Dashed
Use it for a later or optional step.
Hogflix
A nested card.
Levels and sections
A card inside a card becomes an inset well, so nesting sets the level for you. Avoid a third level. Use a divider or white space instead.
A section
A flat border for a large region of a page, such as a long form. It does not change the card levels.
Level 1: a card
A raised pane of glass. Use it for a small group of content.
Level 2: an inset well. Avoid a third level.
Title and status bars
Card.TitleBar and Card.StatusBar run to the card edges at every padding.
Your product
cart 0posthog.capture()8 eventsIngestion
8 events by type- click5
- $pageview2
- $rageclick1
Padding
Use md (the default) for most cards. Use none when the content has its own edges, such as a table, an image, or a code block. Sm and lg are also available.
Session replay
Watch how users move through your product.
Session replay
Watch how users move through your product.
Session replay
Watch how users move through your product.
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- To add space, use white space or a divider, not a card.
- Use Section only for a large flat region of a page, such as a long form or a group of cards. When you are not sure, use a card.
API
Card and Section are site components. Root, Header, and Footer accept div props. Title accepts h3 props. Description accepts p props.
Card.TitleBar
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | – | The title. |
| icon | ReactNode | – | An icon before the title. |
| meta | ReactNode | – | Short text on the right, in the code font. |
| actions | ReactNode | – | Buttons on the right, after the meta text. |
Card.StatusBar
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | – | Counts, status, or code for the footer bar. |
Card.Root
| Prop | Type | Default | Description |
|---|---|---|---|
| appearance | 'glass' | 'solid' | 'dashed' | 'glass'; 'solid' inside solid cards | Selects the material independently of level. A child can select its own appearance. |
| level | 1 | 2 | parent + 1 | 1 is a raised card and 2 is an inset well. A card inside a card is level 2. Sections do not count. |
| padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | The inner padding (12, 16, or 24px) and the gap between parts (8, 12, or 16px). |
Section.Root
| Prop | Type | Default | Description |
|---|---|---|---|
| padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | The same padding scale as Card. |