Layout Components

Container

Manages the main content area by centering it and applying a max-width. It ensures a consistent and readable layout across different screen sizes.

Source Edit this page

Manages the main content area by centering it and applying a max-width. It ensures a consistent and readable layout across different screen sizes.

Basic Container

A centered, full-width wrapper that caps content at a readable max-width. md, wFull, flex, column, itemsCenter, gap, noPadding, outline, and sharp are defaults.

Page Content

Container centers content and constrains width for optimal readability.

<Container border>
  <Title>Page Content</Title>
  <Text>Container centers content and constrains width for optimal readability.</Text>
</Container>

Container Sizes

Sizes (xs, sm, md default, lg, xl) control the max-width: max-w-3xl through max-w-7xl. Resize the viewport to see narrower containers stop growing before wider ones do.

xs — max-w-3xl

sm — max-w-4xl

md (default) — max-w-5xl

lg — max-w-6xl

xl — max-w-7xl

<Col>
  <Container xs border>
    <Text semibold>xs — max-w-3xl</Text>
  </Container>
  <Container sm border>
    <Text semibold>sm — max-w-4xl</Text>
  </Container>
  <Container border>
    <Text semibold>md (default) — max-w-5xl</Text>
  </Container>
  <Container lg border>
    <Text semibold>lg — max-w-6xl</Text>
  </Container>
  <Container xl border>
    <Text semibold>xl — max-w-7xl</Text>
  </Container>
</Col>

Container Padding

Container defaults to noPadding — the parent Section usually owns vertical rhythm. Pass padding to opt in to size-driven internal padding.

noPadding (default)

Edges sit flush with the container box.

padding

Internal padding scales with the size prop.

<Col>
  <Container border>
    <Text semibold>noPadding (default)</Text>
    <Text>Edges sit flush with the container box.</Text>
  </Container>
  <Container padding border>
    <Text semibold>padding</Text>
    <Text>Internal padding scales with the size prop.</Text>
  </Container>
</Col>

Container Appearances

Containers support color appearances: primary, secondary, success, danger, etc.

Primary Container

Highlighted content area

Success Container

Positive feedback area

<Col>
  <Container primary border>
    <Text semibold>Primary Container</Text>
    <Text>Highlighted content area</Text>
  </Container>
  <Container success border>
    <Text semibold>Success Container</Text>
    <Text>Positive feedback area</Text>
  </Container>
</Col>

Container Variants

Use filled for solid backgrounds. outline is the default. Add shadow for elevation.

Filled Container

Solid background with primary color

Outline Container (default)

Border only styling

Shadow Container

Elevated with drop shadow

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

Container Shapes

Containers support different border radius styles. sharp is the default (no radius).

Sharp (default)

Rounded corners

Pill shape

<Col>
  <Container border>
    <Text semibold>Sharp (default)</Text>
  </Container>
  <Container rounded border>
    <Text semibold>Rounded corners</Text>
  </Container>
  <Container pill border padding>
    <Text semibold>Pill shape</Text>
  </Container>
</Col>

Responsive Breakpoints

Container is a flex column by default. Use row to flow horizontally on desktop and mobileCol / tabletCol to stack on smaller screens.

Left Content

Switches to stacked layout on tablets and below.

Right Content

Resize your browser to see the responsive behavior.

<Container row tabletCol border padding>
  <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>
</Container>

Page Layout Pattern

The canonical page layout: a Section owns vertical padding and full-width background, the Container nested inside caps reading width and centers the content.

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>
  <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>

Container 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)