Layout Components
Section
A semantic container used to group related content within a page. This component helps to create a clear document outline and improve accessibility.
A full-bleed page band used to group related content with consistent vertical rhythm. Sections own the outer padding and background; nest a Container inside to cap the inner reading width.
Basic Section
md, wFull, flex, column, itemsStart, gap, padding, outline, sharp, and responsive are defaults. Padding, gap, and font size automatically scale at tablet and mobile breakpoints because responsive 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>Section Sizes
Sizes (xs, sm, md default, lg, xl) control padding and gap.
Small Section
Compact padding
Medium Section (default)
Standard padding
Large Section
Generous padding
<Col> <Section sm border> <Text semibold>Small Section</Text> <Text>Compact padding</Text> </Section> <Section border> <Text semibold>Medium Section (default)</Text> <Text>Standard padding</Text> </Section> <Section lg border> <Text semibold>Large Section</Text> <Text>Generous padding</Text> </Section></Col>Section 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 semibold>Secondary band</Text> <Text>Subtle background to break up a long page.</Text> </Section> <Section primary> <Text semibold>Primary Section</Text> <Text>Highlighted content area</Text> </Section> <Section success> <Text semibold>Success Section</Text> <Text>Positive feedback area</Text> </Section> <Section danger> <Text semibold>Danger Section</Text> <Text>Warning or error area</Text> </Section></Col>Section 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>Section 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 semibold>Row Layout</Text> <Text>Content flows horizontally</Text> <Text>With gap between items</Text> </Section> <Section border> <Text semibold>Column Layout (default)</Text> <Text>Content flows vertically</Text> <Text>With gap between items</Text> </Section></Col>Responsive Breakpoints
Use mobileCol or tabletCol 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 tabletCol 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
responsive (default) scales padding, gap, and font size at tablet and mobile breakpoints using --py-tablet, --gap-mobile, etc. Pass responsive={false} to lock a single size across all viewports.
responsive (default)
Padding shrinks at tablet and mobile.
responsive={false}
Padding stays fixed at the lg size on every viewport.
<Col> <Section lg border> <Text semibold>responsive (default)</Text> <Text>Padding shrinks at tablet and mobile.</Text> </Section> <Section lg responsive={false} border> <Text semibold>responsive={false}</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 <section> in the DOM.</Text> </Section> <Section tag="header" secondary filled> <Title>Page header</Title> <Text>Renders as <header>.</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) | |
brand | Appearance | Brand color appearance (blue) | |
danger | Appearance | Danger color appearance (red) | |
info | Appearance | Info color appearance (cyan) | |
inherit | Appearance | Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables | |
link | Appearance | Link color appearance (blue, for hyperlinks) | |
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) | |
desktopCol | Breakpoint | Switch to column layout on desktop and below (max-desktop: 80rem) | |
mobileCol | Breakpoint | Switch to column layout on mobile and below (max-mobile: 48rem) | |
tabletCol | Breakpoint | Switch to column layout on tablet 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`) | |
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 | |
textJustify | Text Align | Justify text | |
textLeft | Text Align | Align text to left | |
textRight | Text Align | Align text to right | |
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 | |
borderL | Border | Enable border on left | |
borderR | Border | Enable border on right | |
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 | |
responsive | Responsive | ✓ | Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap |
reverse | Reverse | Reverse the order of children | |
noRing | Ring | ✓ | Disable focus ring |
ring | Ring | Enable focus 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) |