Types
The types of @poltura/theme-sdk/layout.
On this page
import { … } from '@poltura/theme-sdk/layout';ContainerWidth
How wide a Container runs: the theme's content width, a wider band, or the full viewport.
type ContainerWidth = 'content' | 'wide' | 'full'LayoutGap
A spacing step from the theme's scale, used for gaps.
type LayoutGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'LayoutAlign
How children line up across the layout's cross axis.
type LayoutAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline'LayoutJustify
How children spread along a row.
type LayoutJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'ResponsiveValue
A value that can change at the theme's breakpoints; base applies below the first one.
type ResponsiveValue<T> = T | {
readonly base: T;
readonly sm?: T;
readonly md?: T;
readonly lg?: T;
readonly xl?: T;
}ContainerProps
Props of Container.
widthContainerWidthHow wide the container runs; `content` when omitted.
classNamestringClasses added to the container.
childrenReactNodeWhat the container holds.
StackProps
Props of Stack.
gapLayoutGapSpace between children; `md` when omitted.
alignLayoutAlignHow children line up across the stack; `stretch` when omitted.
classNamestringClasses added to the stack.
childrenReactNodeThe stacked children.
RowProps
Props of Row.
gapLayoutGapSpace between children; `md` when omitted.
alignLayoutAlignHow children line up vertically; `center` when omitted.
justifyLayoutJustifyHow children spread along the row; `start` when omitted.
wrapbooleanWhether children wrap onto new lines when the row runs out of room.
classNamestringClasses added to the row.
childrenReactNodeThe children in the row.
GridProps
Props of Grid.
columnsrequiredResponsiveValue<number>Equal columns, from 1 to 12, per breakpoint.
gapLayoutGapSpace between cells; `md` when omitted.
classNamestringClasses added to the grid.
childrenReactNodeThe grid cells.
SectionShellProps
Props of SectionShell.
classNamestringClasses added to the section box.
typestringThe section's type, written to the markup so stylesheets can target it.
childrenReactNodeWhat the section holds, drawn inside a content-width container.
SectionHeadingProps
Props of SectionHeading.
titlestringThe heading text; nothing is drawn when both it and the subtitle are empty.
subtitlestringA line under the heading.
align'left' | 'center' | 'right'Text alignment; `center` when omitted.
classNamestringClasses added to the heading block.
SectionCtaProps
Props of SectionCta.
hrefrequiredstringWhere the button leads; nothing is drawn when it is empty.
labelrequiredstringThe button text; nothing is drawn when it is empty.
variant'primary' | 'secondary'The filled `primary` look or the outlined `secondary` one; `primary` when omitted.
classNamestringClasses added to the button.
PageHeroProps
Props of PageHero.
titlerequiredstringThe page title, drawn as the page's `h1`.
descriptionReactNodeA line or paragraph under the title.
classNamestringClasses added to the hero band.
childrenReactNodeExtra content under the description, such as a search box.