Astryx Design System

Section@astryxdesign/core v0.0.15 · Section

Usage

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
import {Section} from '@astryxdesign/core/Section'

Best practices

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.

Examples

Common configurations, variations, and states.

Section — Default with Wash

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.

Section — With Dividers

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.