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

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

## `Container` [#container]

A centred box at the theme's content width, with the theme's side padding.

```ts
Container(props: ContainerProps): ReactElement
```

**Props:** [`ContainerProps`](/themes/sdk/reference/layout/types#containerprops)

**Example**

```tsx
import { Container } from '@poltura/theme-sdk/layout';

export function Band() {
  return <Container width='wide'>Free delivery over 50 EUR</Container>;
}
```

## `Stack` [#stack]

Children stacked top to bottom with an even gap.

```ts
Stack(props: StackProps): ReactElement
```

**Props:** [`StackProps`](/themes/sdk/reference/layout/types#stackprops)

**Example**

```tsx
import { Stack } from '@poltura/theme-sdk/layout';

export function Intro() {
  return (
    <Stack gap='sm' align='center'>
      <h2>New arrivals</h2>
      <p>Fresh from the workshop.</p>
    </Stack>
  );
}
```

## `Row` [#row]

Children side by side with an even gap, optionally wrapping.

```ts
Row(props: RowProps): ReactElement
```

**Props:** [`RowProps`](/themes/sdk/reference/layout/types#rowprops)

**Example**

```tsx
import { Row } from '@poltura/theme-sdk/layout';

export function Actions() {
  return (
    <Row gap='sm' justify='between' wrap>
      <a href='/products'>Shop</a>
      <a href='/contact'>Contact</a>
    </Row>
  );
}
```

## `Grid` [#grid]

Children in equal columns whose count can change at each breakpoint.

```ts
Grid(props: GridProps): ReactElement
```

**Props:** [`GridProps`](/themes/sdk/reference/layout/types#gridprops)

**Example**

```tsx
import { Grid } from '@poltura/theme-sdk/layout';

export function Tiles({ names }: { names: string[] }) {
  return (
    <Grid columns={{ base: 1, sm: 2, lg: 4 }} gap='lg'>
      {names.map((name) => (
        <div key={name}>{name}</div>
      ))}
    </Grid>
  );
}
```

## `SectionShell` [#sectionshell]

The standard section frame: vertical rhythm, a hairline above, and a content-width container.

```ts
SectionShell(props: SectionShellProps): ReactElement
```

**Props:** [`SectionShellProps`](/themes/sdk/reference/layout/types#sectionshellprops)

**Example**

```tsx
import { SectionShell } from '@poltura/theme-sdk/layout';

export function Story() {
  return (
    <SectionShell type='story'>
      <p>Made by hand since 1998.</p>
    </SectionShell>
  );
}
```

## `SectionHeading` [#sectionheading]

A section's heading with an optional subtitle; draws nothing when both are empty.

```ts
SectionHeading(props: SectionHeadingProps): ReactElement | null
```

**Props:** [`SectionHeadingProps`](/themes/sdk/reference/layout/types#sectionheadingprops)

**Example**

```tsx
import { SectionHeading } from '@poltura/theme-sdk/layout';

export function RailTitle({ title }: { title: string }) {
  return <SectionHeading title={title} subtitle='Picked this week' align='left' />;
}
```

## `SectionCta` [#sectioncta]

A section's call-to-action button; draws nothing without a link and a label.

```ts
SectionCta(props: SectionCtaProps): ReactElement | null
```

**Props:** [`SectionCtaProps`](/themes/sdk/reference/layout/types#sectionctaprops)

**Example**

```tsx
import { SectionCta } from '@poltura/theme-sdk/layout';

export function ShopAll() {
  return <SectionCta href='/products' label='Shop all' variant='secondary' />;
}
```

## `PageHero` [#pagehero]

The opening band of a content page: its title, a description and optional extra content.

```ts
PageHero(props: PageHeroProps): ReactElement
```

**Props:** [`PageHeroProps`](/themes/sdk/reference/layout/types#pageheroprops)

**Example**

```tsx
import { PageHero } from '@poltura/theme-sdk/layout';

export function GuidesHero() {
  return <PageHero title='Guides' description='How to choose, use and care for it.' />;
}
```