Container
Centers content horizontally with a configurable max-width and padding. Container decides how wide a region is, so pair it with Stack, Cluster, Grid, or Split to arrange the content inside.
Import
import { Container } from "@hyzer-labs/ui"Demo
<Container max="sm" center={false}>…</Container>
<Container max="md" center={false}>…</Container>
<Container max="lg" center={false}>…</Container>
<Container max="xl" center={false}>…</Container>
<Container max="full" center={false}>…</Container>The tinted zone is the Container and the solid box is its content. padding applies on both axes. paddingInline and paddingBlock override
one axis and win where set: paddingBlock="none" keeps the inline gutters
when a Stack owns the vertical rhythm. The axis names are the CSS logical properties, so
they stay correct in RTL and vertical writing modes. See Spacing & Sizing.
<Container padding="none">…</Container>
<Container padding="none" paddingInline="none">…</Container>
<Container padding="none" paddingBlock="none">…</Container><Container padding="sm">…</Container>
<Container padding="none" paddingInline="sm">…</Container>
<Container padding="none" paddingBlock="sm">…</Container><Container padding="md">…</Container>
<Container padding="none" paddingInline="md">…</Container>
<Container padding="none" paddingBlock="md">…</Container><Container padding="lg">…</Container>
<Container padding="none" paddingInline="lg">…</Container>
<Container padding="none" paddingBlock="lg">…</Container><Container padding="near">…</Container>
<Container padding="none" paddingInline="near">…</Container>
<Container padding="none" paddingBlock="near">…</Container><Container padding="away">…</Container>
<Container padding="none" paddingInline="away">…</Container>
<Container padding="none" paddingBlock="away">…</Container>center only matters when the container is narrower than its parent. The
default centers it with margin-inline: auto; center={false} leaves it flush with the start edge.
<Container max="sm">Centered (default)</Container>
<Container max="sm" center={false}>Flush left</Container>breakout escapes the prose column and spans the nearest ancestor with container-type: inline-size (this docs page sets one on its main content
area; with no ancestor container it falls back to the viewport). max is
ignored. By default the margin math assumes a centered column. Start-aligned layouts
like this one set --hz-breakout-shift: 0 so the breakout grows toward the end
edge only.
<!-- Escapes the prose column to span the nearest inline-size container -->
<!-- (set container-type: inline-size on your layout root; falls back to the viewport). -->
<!-- Centered column assumed; start-aligned layouts set --hz-breakout-shift: 0. -->
<Container breakout padding="none">Full-bleed demo, hero, or media</Container>Props
| Name | Type | Default | Note |
|---|---|---|---|
max | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'lg' | |
padding | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | 'md' | Both axes. Shared LayoutPadding scale — near/away tighten inside data-density-shift regions. |
paddingInline | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | — | Per-axis override — wins over padding on the inline axis. Same LayoutPadding scale. |
paddingBlock | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | — | Per-axis override — wins over padding on the block axis. Same LayoutPadding scale. |
center | boolean | true | |
breakout | boolean | false | Escapes the parent column to span the nearest inline-size container (viewport when none). Overrides max. |
as | string | 'div' | |
class | string | — | Merged after the hz-container class. |
children | Snippet | — |
Theme hooks
What this component promises your CSS. The reference theme styles exactly these — from @layer hz-theme, so your unlayered rules win. See Styling Components for the how.
Root class: .hz-container
Data attributes
| Hook | Values | Styles |
|---|---|---|
data-max | 'sm' | 'md' | 'lg' | 'xl' | 'full' | Selects which --hz-width-* token caps the column. Default lg. |
data-padding | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | Padding on both axes. Default md. |
data-center | present when centered | Applies margin-inline: auto. Present by default. |
data-breakout | present when breaking out | Escapes the column to span the nearest inline-size container. |
Custom properties
| Hook | Values | Styles |
|---|---|---|
--hz-breakout-shift | <length> — default calc(50% - 50cqw) | Breakout alignment offset. The default assumes a centered column; set it to 0 in a start-aligned layout so the bleed only grows rightward. |
Accessibility
Container is a layout primitive with no ARIA semantics. Use the as prop to render a meaningful landmark element (e.g. as='main') where that fits.