Layout

These components help you structure and lay out your emails using email-safe tables. They are imported from hono-email:

import { Container, Section, Row, Column, Box, Spacer, Flex, Grid, Card } from 'hono-email'

---

<Container>

Full-width presentation table for wrapping email sections. Use it to limit content width and center layout.

<Container style={{ maxWidth: '560px', margin: '0 auto' }}>
  <Text>Hello</Text>
</Container>

<Section>

Full-width presentation table whose direct children are table cells (<Column>).

<Section>
  <Column width="50%">Left</Column>
  <Column width="50%">Right</Column>
</Section>

<Row> / <Column>

Table row (<tr>) and table cell (<td>) helpers for manual layouts.

<Row>
  <Column style={{ padding: '12px' }}>Receipt total</Column>
  <Column style={{ padding: '12px' }}>$42.00</Column>
</Row>

<Box>

Generic email-safe block wrapper.

<Box as="td" style={{ padding: '16px' }}>
  <Text>Content</Text>
</Box>

as Optional

Type: 'div' | 'span' | 'table' | 'tbody' | 'tr' | 'td' · Default: 'div'

<Spacer>

Explicit email-safe spacing block.

<Text>First paragraph</Text>
<Spacer height={24} />
<Text>Second paragraph</Text>

height Optional

Type: number | string · Default: 16

Spacer height. Numbers are converted to pixels.

width Optional

Type: number | string · Default: '100%'

Spacer width. Numbers are converted to pixels.

<Flex>

Table-based layout for horizontal or vertical arrangements. Does not use CSS display: flex.

<Flex align="middle" gap={12} justify="center">
  <Img src="logo.png" alt="Logo" width={32} height={32} />
  <Text>hono-email</Text>
</Flex>

direction Optional

Type: 'row' | 'column' · Default: 'row'

align Optional

Type: 'top' | 'middle' | 'bottom' | 'baseline' | 'stretch' · Default: 'top'

Vertical alignment of child cells.

justify Optional

Type: 'left' | 'center' | 'right' | 'start' | 'end' | 'space-between'

Horizontal alignment of the table or space distribution.

gap Optional

Type: number | string

Space between children. Numbers are converted to pixels.

<Grid>

Table-based grid with a fixed column count. Does not use CSS display: grid.

<Grid columns={3} gap={16}>
  <Card>
    <Text>Feature A</Text>
  </Card>
  <Card>
    <Text>Feature B</Text>
  </Card>
  <Card>
    <Text>Feature C</Text>
  </Card>
</Grid>

columns Optional

Type: number · Default: 2

Number of columns per row.

align Optional

Type: 'top' | 'middle' | 'bottom' | 'baseline' | 'stretch' · Default: 'top'

gap Optional

Type: number | string

Space between grid cells. Numbers are converted to pixels.

<Card>

Bordered table container with email-safe background and padding defaults.

<Card padding={32} borderColor="#d1d5db" backgroundColor="#f9fafb">
  <Heading as="h3">Invoice #1234</Heading>
  <Text>Due: January 1, 2026</Text>
</Card>

backgroundColor Optional

Type: string · Default: '#ffffff'

borderColor Optional

Type: string · Default: '#e5e7eb'

borderWidth Optional

Type: number | string · Default: 1

Numbers are converted to pixels.

padding Optional

Type: number | string · Default: 24

Numbers are converted to pixels.

contentStyle Optional

Type: JSX.CSSProperties

Inline style applied to the inner content cell.

width Optional

Type: number | string · Default: '100%'