Skip to main content

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.

<Row>​

Layout container. Must be a direct child of a root wrapper (<Email>, <Page>, <Document>, or <Body>).

Props​

PropTypeDefault
layoutColumnLayout—
cellsnumber[][1] (single column) when neither layout nor cells is given
backgroundColorstring—
paddingstring"0px"
noStackMobilebooleanfalse

Multi-column rows stack vertically on narrow viewports by default. Set noStackMobile={true} to keep them side-by-side.

If you supply layout, the library calls validateColumnLayout on the children at render time. Passing the wrong number of <Column> children throws.

Example​

<Row layout={ColumnLayouts.TwoEqual} backgroundColor="#ffffff" padding="20px">
  <Column>{/* ... */}</Column>
  <Column>{/* ... */}</Column>
</Row>

<Column>​

Direct child of <Row>. Hosts the content components.

Props​

PropTypeDefault
paddingstring"0px"
backgroundColorstring""
borderRadiusstring"0px"

A quick note on padding behavior, since it trips people up: the column itself defaults to "0px". Each content component inside the column is wrapped in its own container, with its own default padding ("10px"). That wrapping is what creates the breathing room you see between items. Set padding on the column when you want to push all items inward together; set it on individual items (or on the <Row>) for finer control.

Example​

<Column padding="20px" backgroundColor="#fafafa" borderRadius="8px">
  <Paragraph>Inside a column</Paragraph>
</Column>

The <Column> count must match the chosen layout. TwoEqual wants two columns, ThreeEqual wants three, mismatch throws via validateColumnLayout. See Limitations.

ColumnLayouts​

A predefined enum of common column ratios. Each value maps to a cells array.

import { ColumnLayouts } from '@unlayer/react-elements';

<Row layout={ColumnLayouts.OneColumn}>             {/* [1]         → 100% */}
<Row layout={ColumnLayouts.TwoEqual}>              {/* [1,1]       → 50% + 50% */}
<Row layout={ColumnLayouts.TwoWideNarrow}>         {/* [2,1]       → 67% + 33% */}
<Row layout={ColumnLayouts.TwoNarrowWide}>         {/* [1,2]       → 33% + 67% */}
<Row layout={ColumnLayouts.ThreeEqual}>            {/* [1,1,1]     → 33% each */}
<Row layout={ColumnLayouts.ThreeNarrowWideNarrow}> {/* [1,2,1]     → 25% + 50% + 25% */}
<Row layout={ColumnLayouts.FourEqual}>             {/* [1,1,1,1]   → 25% each */}
<Row layout={ColumnLayouts.FiveEqual}>             {/* [1,1,1,1,1] → 20% each */}

Custom Ratios​

If none of the presets fit, pass cells directly:

<Row cells={[3, 1]}>
  <Column>{/* 75% */}</Column>
  <Column>{/* 25% */}</Column>
</Row>

cells is the raw form layout uses internally. Use layout for readability and cells for one-off ratios.

validateColumnLayout​

Exported helper if you want to validate a layout before rendering:

import { validateColumnLayout, ColumnLayouts } from '@unlayer/react-elements';

validateColumnLayout(ColumnLayouts.TwoEqual, 2); // ok
validateColumnLayout(ColumnLayouts.TwoEqual, 3); // throws

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​