Developers
Start building
Themes/Theme SDK/Modules/layout/Parts

Parts

The parts of @poltura/theme-sdk/layout.

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

Container

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

Container(props: ContainerProps): ReactElement

Props: ContainerProps

Example

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

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

Stack

Children stacked top to bottom with an even gap.

Stack(props: StackProps): ReactElement

Props: StackProps

Example

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

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

Row(props: RowProps): ReactElement

Props: RowProps

Example

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

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

Grid(props: GridProps): ReactElement

Props: GridProps

Example

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

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

SectionShell(props: SectionShellProps): ReactElement

Props: SectionShellProps

Example

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

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

SectionHeading

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

SectionHeading(props: SectionHeadingProps): ReactElement | null

Props: SectionHeadingProps

Example

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

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

SectionCta

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

SectionCta(props: SectionCtaProps): ReactElement | null

Props: SectionCtaProps

Example

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

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

PageHero

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

PageHero(props: PageHeroProps): ReactElement

Props: PageHeroProps

Example

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

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