Section is the correct way to create page regions and group related content on a page. Use it for settings groups, form sections, sidebar areas, or any time you need visual separation between parts of a page. If you are tempted to use a Card for a page section, use Section instead.
ts
| Guidance | Practices |
|---|---|
| Do | Use Section for page-level grouping: settings panels, form groups, sidebar regions. These are sections of a page, not discrete items. |
| Do | Start with the default variant. Use muted only to call attention to a specific region. |
| Do | Add dividers between same-background sections that need separation. |
| Do | Combine with a heading + Stack for a typical page section pattern. |
| Don't | Use Card when you mean Section. Cards are for discrete items (one notification, one profile). Sections are for page regions. |
A default section stacked with a full-width muted section. Shows how muted draws attention to a specific region like an upgrade prompt or banner.
Adjacent sections separated by bottom dividers, like a settings page. Use dividers when stacking same-variant sections that need visual separation without a background change.