Section @astryx-svelte/core v0.3.0 · 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
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.