layout

Layout primitives and section chrome: containers, stacks, rows, grids and section frames.

On this page

import { … } from '@poltura/theme-sdk/layout';

Parts

Name	What it is
`Container`	A centred box at the theme's content width, with the theme's side padding.
`Stack`	Children stacked top to bottom with an even gap.
`Row`	Children side by side with an even gap, optionally wrapping.
`Grid`	Children in equal columns whose count can change at each breakpoint.
`SectionShell`	The standard section frame: vertical rhythm, a hairline above, and a content-width container.
`SectionHeading`	A section's heading with an optional subtitle; draws nothing when both are empty.
`SectionCta`	A section's call-to-action button; draws nothing without a link and a label.
`PageHero`	The opening band of a content page: its title, a description and optional extra content.

Name	What it is
`ContainerWidth`	How wide a `Container` runs: the theme's content width, a wider band, or the full viewport.
`LayoutGap`	A spacing step from the theme's scale, used for gaps.
`LayoutAlign`	How children line up across the layout's cross axis.
`LayoutJustify`	How children spread along a row.
`ResponsiveValue`	A value that can change at the theme's breakpoints; `base` applies below the first one.
`ContainerProps`	Props of `Container`.
`StackProps`	Props of `Stack`.
`RowProps`	Props of `Row`.
`GridProps`	Props of `Grid`.
`SectionShellProps`	Props of `SectionShell`.
`SectionHeadingProps`	Props of `SectionHeading`.
`SectionCtaProps`	Props of `SectionCta`.
`PageHeroProps`	Props of `PageHero`.

Last updated Oct 29, 2026