Layout Components

Section

Groups related content and owns the outer padding and background of a page band. Renders as a plain wrapper by default; pass tag="section" for a landmark.

Source Edit this page

Sections own the outer padding and background; nest a Container inside to cap the inner reading width.

Basic usage

md, wFull, flex, column, itemsStart, gap, padding, outline, sharp, and responsiveSizing are defaults. Padding and gap automatically scale at tablet and mobile breakpoints because responsiveSizing is on.

Welcome Section

Sections provide consistent vertical rhythm and full-width backgrounds.

<Section border>
  <Title>Welcome Section</Title>
  <Text>Sections provide consistent vertical rhythm and full-width backgrounds.</Text>
</Section>

Sizes

Sizes (xs, sm, md default, lg, xl) control padding and gap.

Extra Small Section

Tightest padding

Small Section

Compact padding

Medium Section (default)

Standard padding

Large Section

Generous padding

Extra Large Section

Widest padding

<Col>
  <Section xs border>
    <Text fontSemibold>Extra Small Section</Text>
    <Text>Tightest padding</Text>
  </Section>
  <Section sm border>
    <Text fontSemibold>Small Section</Text>
    <Text>Compact padding</Text>
  </Section>
  <Section border>
    <Text fontSemibold>Medium Section (default)</Text>
    <Text>Standard padding</Text>
  </Section>
  <Section lg border>
    <Text fontSemibold>Large Section</Text>
    <Text>Generous padding</Text>
  </Section>
  <Section xl border>
    <Text fontSemibold>Extra Large Section</Text>
    <Text>Widest padding</Text>
  </Section>
</Col>

Appearances

Sections support color appearances: primary, secondary, success, danger, etc. Use secondary filled bands to create visual rhythm between regular sections.

Secondary band

Subtle background to break up a long page.

Primary Section

Highlighted content area

Success Section

Positive feedback area

Danger Section

Warning or error area

<Col>
  <Section secondary filled>
    <Text fontSemibold>Secondary band</Text>
    <Text>Subtle background to break up a long page.</Text>
  </Section>
  <Section primary>
    <Text fontSemibold>Primary Section</Text>
    <Text>Highlighted content area</Text>
  </Section>
  <Section success>
    <Text fontSemibold>Success Section</Text>
    <Text>Positive feedback area</Text>
  </Section>
  <Section danger>
    <Text fontSemibold>Danger Section</Text>
    <Text>Warning or error area</Text>
  </Section>
</Col>

Variants

Use filled for solid backgrounds (outline is the default), and shadow for elevation.

Filled Section

Solid background with primary color

Outline Section (default)

Border-only styling

Shadow Section

Elevated with drop shadow

<Col>
  <Section filled primary>
    <Title filled primary>Filled Section</Title>
    <Text filled primary>Solid background with primary color</Text>
  </Section>
  <Section secondary border>
    <Title secondary>Outline Section (default)</Title>
    <Text secondary>Border-only styling</Text>
  </Section>
  <Section shadow>
    <Title>Shadow Section</Title>
    <Text>Elevated with drop shadow</Text>
  </Section>
</Col>

Shapes

Section is sharp by default, since a full-bleed band should meet the viewport edge without a radius. rounded suits a section used as an inset panel.

Sharp, the default

Rounded

Pill

<Col>
  <Section border>Sharp, the default</Section>
  <Section rounded border>Rounded</Section>
  <Section pill border>Pill</Section>
</Col>

Layout

Use row for horizontal layout. gap is already on by default; pair with noPadding only when a wrapper owns spacing.

Row Layout

Content flows horizontally

With gap between items

Column Layout (default)

Content flows vertically

With gap between items

<Col>
  <Section row border>
    <Text fontSemibold>Row Layout</Text>
    <Text>Content flows horizontally</Text>
    <Text>With gap between items</Text>
  </Section>
  <Section border>
    <Text fontSemibold>Column Layout (default)</Text>
    <Text>Content flows vertically</Text>
    <Text>With gap between items</Text>
  </Section>
</Col>

Responsive breakpoints

Use mobileStack or tabletStack to switch from row to column layout on smaller screens.

Left Content

Switches to stacked layout on tablets and below.

Right Content

Resize your browser to see the responsive behavior.

<Section row tabletStack border>
  <Col>
    <Title>Left Content</Title>
    <Text>Switches to stacked layout on tablets and below.</Text>
  </Col>
  <Col>
    <Title>Right Content</Title>
    <Text>Resize your browser to see the responsive behavior.</Text>
  </Col>
</Section>

Responsive sizing

responsiveSizing (default) scales padding and gap at tablet and mobile breakpoints using --py-tablet, --gap-mobile, etc. Pass responsiveSizing={false} to lock a single size across all viewports.

responsiveSizing (default)

Padding shrinks at tablet and mobile.

responsiveSizing={false}

Padding stays fixed at the lg size on every viewport.

<Col>
  <Section lg border>
    <Text fontSemibold>responsiveSizing (default)</Text>
    <Text>Padding shrinks at tablet and mobile.</Text>
  </Section>
  <Section lg responsiveSizing={false} border>
    <Text fontSemibold>responsiveSizing=&#123;false&#125;</Text>
    <Text>Padding stays fixed at the lg size on every viewport.</Text>
  </Section>
</Col>

Semantic tag

Section renders as <div> by default. Pass tag="section" for a semantic <section> element, or tag="header" / tag="footer" / tag="aside" for other landmarks.

Semantic section

Renders as <section> in the DOM.

Page header

Renders as <header>.

<Col>
  <Section tag="section" border>
    <Title>Semantic section</Title>
    <Text>Renders as &lt;section&gt; in the DOM.</Text>
  </Section>
  <Section tag="header" secondary filled>
    <Title>Page header</Title>
    <Text>Renders as &lt;header&gt;.</Text>
  </Section>
</Col>

Page layout pattern

The canonical full-bleed page band: a Section owns the outer padding and background, with a nested Container capping the inner reading width.

Getting Started

The Section handles the full-bleed background and outer padding. The Container constrains the inner content to a comfortable reading width.

<Section secondary filled>
  <Container>
    <PageTitle>Getting Started</PageTitle>
    <Text>The Section handles the full-bleed background and outer padding. The Container constrains the inner content to a comfortable reading width.</Text>
  </Container>
</Section>

Section Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inheritAppearance`	Appearance		Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`desktopStack`	Breakpoint		Stack into a column at desktop width and below (max-desktop: 80rem)
`mobileStack`	Breakpoint		Stack into a column at mobile width and below (max-mobile: 48rem)
`tabletStack`	Breakpoint		Stack into a column at tablet width and below (max-tablet: 64rem)
`flex1`	Flex		Take up remaining space (= `flex-1`, i.e. `flex: 1 1 0%`)
`flexAuto`	Flex		Grow but respect intrinsic size (= `flex-auto`, i.e. `flex: 1 1 auto`)
`flexNone`	Flex		Don't grow and don't shrink (= `flex-none`, i.e. `flex: none`)
`margin`	Margin		Enable margin on all sides
`marginB`	Margin		Enable only bottom margin
`marginT`	Margin		Enable only top margin
`marginX`	Margin		Enable only horizontal (inline) margin
`marginY`	Margin		Enable only vertical (block) margin
`noMargin`	Margin		Disable margin (reset to 0)
`noPadding`	Padding		Disable internal padding
`padding`	Padding	✓	Enable internal padding
`paddingX`	Padding		Enable only horizontal padding
`paddingY`	Padding		Enable only vertical padding
`pill`	Shape		Fully rounded corners (circular)
`rounded`	Shape		Medium rounded corners (default)
`sharp`	Shape	✓	No rounded corners (square)
`noShrink`	Shrink		Prevent the flex item from shrinking below its content size (= `shrink-0`)
`lg`	Size		Large size
`md`	Size	✓	Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`textCenter`	Text Align		Align text to center
`textEnd`	Text Align		Align text to the reading-direction end (right in LTR, left in RTL)
`textJustify`	Text Align		Justify text
`textLeft`	Text Align		Align text to left (physical side, does not flip under RTL)
`textRight`	Text Align		Align text to right (physical side, does not flip under RTL)
`textStart`	Text Align		Align text to the reading-direction start (left in LTR, right in RTL)
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant	✓	Outline variant - transparent background with border and colored text (default)

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Default	Description
`border`	Border		Enable border on all sides
`borderB`	Border		Enable border on bottom
`borderEnd`	Border		Enable border on the inline-end side (right in LTR, left in RTL)
`borderL`	Border		Enable border on left
`borderR`	Border		Enable border on right
`borderStart`	Border		Enable border on the inline-start side (left in LTR, right in RTL)
`borderT`	Border		Enable border on top
`borderX`	Border		Enable border on left and right
`borderY`	Border		Enable border on top and bottom
`noBorder`	Border	✓	Disable all borders
`block`	Display		Block display - takes full width, new line
`contents`	Display		Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display	✓	Flex display - flexbox container
`grid`	Display		Grid display - CSS grid container
`hidden`	Display		Hidden display - element is not visible
`inline`	Display		Inline display - flows with text
`inlineBlock`	Display		Inline-block display - inline but with block properties
`inlineFlex`	Display		Inline-flex display - inline flexbox container
`inlineGrid`	Display		Inline-grid display - inline grid container
`table`	Display		Table display - behaves like table element
`tableCell`	Display		Table-cell display - behaves like td element
`column`	Flex Direction	✓	Flex direction column (vertical)
`columnReverse`	Flex Direction		Flex direction column-reverse
`row`	Flex Direction		Flex direction row (horizontal)
`rowReverse`	Flex Direction		Flex direction row-reverse
`gap`	Gap	✓	Enable gap spacing between children
`noGap`	Gap		Disable gap spacing
`hAuto`	Height		Set height to auto
`hFit`	Height		Set height to fit-content
`hFull`	Height		Set height to 100%
`hScreen`	Height		Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide		Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide		Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide		Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items		Align items to baseline
`itemsCenter`	Items		Align items to center
`itemsEnd`	Items		Align items to end (bottom/right)
`itemsStart`	Items	✓	Align items to start (top/left)
`itemsStretch`	Items		Stretch items to fill container
`justifyAround`	Justify		Distribute items with space around them
`justifyBaseline`	Justify		Align items along their baseline on main axis
`justifyBetween`	Justify		Distribute items with space between them
`justifyCenter`	Justify		Center items along the main axis
`justifyEnd`	Justify		Pack items toward the end of the main axis
`justifyEvenly`	Justify		Distribute items with equal space around them
`justifyStart`	Justify		Pack items toward the start of the main axis
`justifyStretch`	Justify		Stretch items to fill the main axis
`overflowAuto`	Overflow		Auto overflow - show scrollbars if needed
`overflowClip`	Overflow		Clip overflow - hard clip without scrollbars
`overflowHidden`	Overflow		Hidden overflow - clip content without scrollbars
`overflowScroll`	Overflow		Scroll overflow - always show scrollbars
`overflowVisible`	Overflow		Visible overflow - content extends beyond bounds
`overflowXAuto`	Overflow		Auto overflow on X-axis only
`overflowXClip`	Overflow		Clip overflow on X-axis only
`overflowXHidden`	Overflow		Hidden overflow on X-axis only
`overflowXScroll`	Overflow		Scroll overflow on X-axis only
`overflowXVisible`	Overflow		Visible overflow on X-axis only
`overflowYAuto`	Overflow		Auto overflow on Y-axis only
`overflowYClip`	Overflow		Clip overflow on Y-axis only
`overflowYHidden`	Overflow		Hidden overflow on Y-axis only
`overflowYScroll`	Overflow		Scroll overflow on Y-axis only
`overflowYVisible`	Overflow		Visible overflow on Y-axis only
`absolute`	Position		Absolute positioning
`fixed`	Position		Fixed positioning
`relative`	Position		Relative positioning
`static`	Position		Static positioning
`sticky`	Position		Sticky positioning
`responsiveSizing`	Responsive Sizing	✓	Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`insetRing`	Ring		Enable the inset ring — emits ring-inset
`noInsetRing`	Ring	✓	Disable the inset ring
`noShadow`	Shadow	✓	Disable drop shadow
`shadow`	Shadow		Enable drop shadow
`transparent`	Transparent		Disable background color - makes component background transparent
`wAuto`	Width		Set width to auto
`wFit`	Width		Set width to fit-content
`wFull`	Width	✓	Set width to 100%
`wScreen`	Width		Set width to 100vw (viewport width), removes max-width constraint
`flexNoWrap`	Wrap		Force flex items to stay on single line (may overflow)
`flexWrap`	Wrap		Allow flex items to wrap to new lines when container is too narrow
`flexWrapReverse`	Wrap		Wrap flex items in reverse order (last items wrap first)