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

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

## `ContainerWidth` [#containerwidth]

How wide a [`Container`](/themes/sdk/reference/layout/parts#container) runs: the theme's content width, a wider band, or the full viewport.

```ts
type ContainerWidth = 'content' | 'wide' | 'full'
```

## `LayoutGap` [#layoutgap]

A spacing step from the theme's scale, used for gaps.

```ts
type LayoutGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
```

## `LayoutAlign` [#layoutalign]

How children line up across the layout's cross axis.

```ts
type LayoutAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline'
```

## `LayoutJustify` [#layoutjustify]

How children spread along a row.

```ts
type LayoutJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
```

## `ResponsiveValue` [#responsivevalue]

A value that can change at the theme's breakpoints; `base` applies below the first one.

```ts
type ResponsiveValue<T> = T | {
    readonly base: T;
    readonly sm?: T;
    readonly md?: T;
    readonly lg?: T;
    readonly xl?: T;
}
```

## `ContainerProps` [#containerprops]

Props of [`Container`](/themes/sdk/reference/layout/parts#container).

<TypeTable type={{"width":{"description":"How wide the container runs; `content` when omitted.","type":"ContainerWidth","required":false},"className":{"description":"Classes added to the container.","type":"string","required":false},"children":{"description":"What the container holds.","type":"ReactNode","required":false}}} />

## `StackProps` [#stackprops]

Props of [`Stack`](/themes/sdk/reference/layout/parts#stack).

<TypeTable type={{"gap":{"description":"Space between children; `md` when omitted.","type":"LayoutGap","required":false},"align":{"description":"How children line up across the stack; `stretch` when omitted.","type":"LayoutAlign","required":false},"className":{"description":"Classes added to the stack.","type":"string","required":false},"children":{"description":"The stacked children.","type":"ReactNode","required":false}}} />

## `RowProps` [#rowprops]

Props of [`Row`](/themes/sdk/reference/layout/parts#row).

<TypeTable type={{"gap":{"description":"Space between children; `md` when omitted.","type":"LayoutGap","required":false},"align":{"description":"How children line up vertically; `center` when omitted.","type":"LayoutAlign","required":false},"justify":{"description":"How children spread along the row; `start` when omitted.","type":"LayoutJustify","required":false},"wrap":{"description":"Whether children wrap onto new lines when the row runs out of room.","type":"boolean","required":false},"className":{"description":"Classes added to the row.","type":"string","required":false},"children":{"description":"The children in the row.","type":"ReactNode","required":false}}} />

## `GridProps` [#gridprops]

Props of [`Grid`](/themes/sdk/reference/layout/parts#grid).

<TypeTable type={{"columns":{"description":"Equal columns, from 1 to 12, per breakpoint.","type":"ResponsiveValue<number>","required":true},"gap":{"description":"Space between cells; `md` when omitted.","type":"LayoutGap","required":false},"className":{"description":"Classes added to the grid.","type":"string","required":false},"children":{"description":"The grid cells.","type":"ReactNode","required":false}}} />

## `SectionShellProps` [#sectionshellprops]

Props of [`SectionShell`](/themes/sdk/reference/layout/parts#sectionshell).

<TypeTable type={{"className":{"description":"Classes added to the section box.","type":"string","required":false},"type":{"description":"The section's type, written to the markup so stylesheets can target it.","type":"string","required":false},"children":{"description":"What the section holds, drawn inside a content-width container.","type":"ReactNode","required":false}}} />

## `SectionHeadingProps` [#sectionheadingprops]

Props of [`SectionHeading`](/themes/sdk/reference/layout/parts#sectionheading).

<TypeTable type={{"title":{"description":"The heading text; nothing is drawn when both it and the subtitle are empty.","type":"string","required":false},"subtitle":{"description":"A line under the heading.","type":"string","required":false},"align":{"description":"Text alignment; `center` when omitted.","type":"'left' | 'center' | 'right'","required":false},"className":{"description":"Classes added to the heading block.","type":"string","required":false}}} />

## `SectionCtaProps` [#sectionctaprops]

Props of [`SectionCta`](/themes/sdk/reference/layout/parts#sectioncta).

<TypeTable type={{"href":{"description":"Where the button leads; nothing is drawn when it is empty.","type":"string","required":true},"label":{"description":"The button text; nothing is drawn when it is empty.","type":"string","required":true},"variant":{"description":"The filled `primary` look or the outlined `secondary` one; `primary` when omitted.","type":"'primary' | 'secondary'","required":false},"className":{"description":"Classes added to the button.","type":"string","required":false}}} />

## `PageHeroProps` [#pageheroprops]

Props of [`PageHero`](/themes/sdk/reference/layout/parts#pagehero).

<TypeTable type={{"title":{"description":"The page title, drawn as the page's `h1`.","type":"string","required":true},"description":{"description":"A line or paragraph under the title.","type":"ReactNode","required":false},"className":{"description":"Classes added to the hero band.","type":"string","required":false},"children":{"description":"Extra content under the description, such as a search box.","type":"ReactNode","required":false}}} />