Section Props

Name	Type	Default	Description
variant	'section' | 'transparent' | 'muted'	'section'	Background. section uses the surface, muted uses the wash, and transparent paints nothing.
padding	SpacingStep	4	Padding on every edge. 0 is edge-to-edge content.
paddingInline	SpacingStep	-	Inline-axis padding. Overrides padding on that axis.
paddingInlineStart	SpacingStep	-	Inline-start padding. Overrides the broader values on that edge. The physical edge follows writing direction.
paddingInlineEnd	SpacingStep	-	Inline-end padding. Overrides the broader values on that edge.
paddingBlock	SpacingStep	-	Block-axis padding. Overrides padding on that axis.
paddingBlockStart	SpacingStep	-	Block-start padding. Overrides the broader values on that edge.
paddingBlockEnd	SpacingStep	-	Block-end padding. Overrides the broader values on that edge.
dividers	Array<'top' | 'bottom' | 'start' | 'end'>	-	Edges that draw a 1px border. start and end follow writing direction.
width	number | string	-	Width. Numbers are pixels, strings are used as they are.
height	number | string	-	Height. Numbers are pixels, strings are used as they are.
maxWidth	number | string	-	Maximum width. Numbers are pixels, strings are used as they are.
minHeight	number | string	-	Minimum height. Numbers are pixels, strings are used as they are.

SpacingStep accepts 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10.

Slots

Name	Description
default	Content inside the section.

Native attributes

Section renders a <div>.

The following go to that element:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.

class is merged. The inner element sets data-variant and data-divider-* for each requested edge.