# layout (/themes/sdk/reference/layout)

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

## [Parts](/themes/sdk/reference/layout/parts) [#parts]

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

## [Types](/themes/sdk/reference/layout/types) [#types]

| Name | What it is |
| --- | --- |
| [`ContainerWidth`](/themes/sdk/reference/layout/types#containerwidth) | How wide a [`Container`](/themes/sdk/reference/layout/parts#container) runs: the theme's content width, a wider band, or the full viewport. |
| [`LayoutGap`](/themes/sdk/reference/layout/types#layoutgap) | A spacing step from the theme's scale, used for gaps. |
| [`LayoutAlign`](/themes/sdk/reference/layout/types#layoutalign) | How children line up across the layout's cross axis. |
| [`LayoutJustify`](/themes/sdk/reference/layout/types#layoutjustify) | How children spread along a row. |
| [`ResponsiveValue`](/themes/sdk/reference/layout/types#responsivevalue) | A value that can change at the theme's breakpoints; `base` applies below the first one. |
| [`ContainerProps`](/themes/sdk/reference/layout/types#containerprops) | Props of [`Container`](/themes/sdk/reference/layout/parts#container). |
| [`StackProps`](/themes/sdk/reference/layout/types#stackprops) | Props of [`Stack`](/themes/sdk/reference/layout/parts#stack). |
| [`RowProps`](/themes/sdk/reference/layout/types#rowprops) | Props of [`Row`](/themes/sdk/reference/layout/parts#row). |
| [`GridProps`](/themes/sdk/reference/layout/types#gridprops) | Props of [`Grid`](/themes/sdk/reference/layout/parts#grid). |
| [`SectionShellProps`](/themes/sdk/reference/layout/types#sectionshellprops) | Props of [`SectionShell`](/themes/sdk/reference/layout/parts#sectionshell). |
| [`SectionHeadingProps`](/themes/sdk/reference/layout/types#sectionheadingprops) | Props of [`SectionHeading`](/themes/sdk/reference/layout/parts#sectionheading). |
| [`SectionCtaProps`](/themes/sdk/reference/layout/types#sectionctaprops) | Props of [`SectionCta`](/themes/sdk/reference/layout/parts#sectioncta). |
| [`PageHeroProps`](/themes/sdk/reference/layout/types#pageheroprops) | Props of [`PageHero`](/themes/sdk/reference/layout/parts#pagehero). |

<AnchorRedirect to={{"parts":"/themes/sdk/reference/layout/parts","container":"/themes/sdk/reference/layout/parts","stack":"/themes/sdk/reference/layout/parts","row":"/themes/sdk/reference/layout/parts","grid":"/themes/sdk/reference/layout/parts","sectionshell":"/themes/sdk/reference/layout/parts","sectionheading":"/themes/sdk/reference/layout/parts","sectioncta":"/themes/sdk/reference/layout/parts","pagehero":"/themes/sdk/reference/layout/parts","types":"/themes/sdk/reference/layout/types","containerwidth":"/themes/sdk/reference/layout/types","layoutgap":"/themes/sdk/reference/layout/types","layoutalign":"/themes/sdk/reference/layout/types","layoutjustify":"/themes/sdk/reference/layout/types","responsivevalue":"/themes/sdk/reference/layout/types","containerprops":"/themes/sdk/reference/layout/types","stackprops":"/themes/sdk/reference/layout/types","rowprops":"/themes/sdk/reference/layout/types","gridprops":"/themes/sdk/reference/layout/types","sectionshellprops":"/themes/sdk/reference/layout/types","sectionheadingprops":"/themes/sdk/reference/layout/types","sectionctaprops":"/themes/sdk/reference/layout/types","pageheroprops":"/themes/sdk/reference/layout/types"}} />