Section is a container that is used to create visual separation. Use the default variant for standard content (white), wash to emphasize or group related content (gray), and transparent for no background while still using Section's padding and dividers.
ts
import{XDSSection}from'@xds/core/Section'
Best practices
Guidance
Practices
Do
Start with the default variant. Use wash only to call attention to a specific region.
Do
Add dividers between same-background sections that need separation.
Examples
Common configurations, variations, and states.
Section — Default with Wash
A default section stacked with a full-width wash section. Shows how wash 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.