Skip to main content
Unlayer Docs

Layout Components

Every tree follows the same shape:

<Email | Page | Document | Body>
  <Row layout={...}>
    <Column>
      ...content components...
    </Column>
  </Row>
</...>

The layout primitives are Row, Column, and the ColumnLayouts enum.

Layout Reference​

  • Row — the section-level container that sits inside a wrapper.
  • Column — the content host that sits inside a row.
  • ColumnLayouts — predefined and custom column ratios.

Putting It Together​

import {
  Email,
  Row,
  Column,
  ColumnLayouts,
  Heading,
  Paragraph,
  renderToHtml,
} from '@unlayer/react-elements';

const html = renderToHtml(
  <Email contentWidth="600px">
    <Row layout={ColumnLayouts.OneColumn} padding="20px">
      <Column>
        <Heading headingType="h1" fontSize="22px">
          Layout demo
        </Heading>
      </Column>
    </Row>

    <Row layout={ColumnLayouts.TwoWideNarrow} padding="20px">
      <Column>
        <Paragraph>Wide column — main content</Paragraph>
      </Column>
      <Column>
        <Paragraph>Narrow column — sidebar</Paragraph>
      </Column>
    </Row>

    <Row cells={[1, 2, 1]} padding="20px">
      <Column>
        <Paragraph>25%</Paragraph>
      </Column>
      <Column>
        <Paragraph>50%</Paragraph>
      </Column>
      <Column>
        <Paragraph>25%</Paragraph>
      </Column>
    </Row>
  </Email>,
);

See Also​