Skip to main content
Layout components provide the structure for your email content. They use table-based layouts for maximum compatibility across email clients.

​
Container

A centered content container with a maximum width, typically used to constrain email content to a readable width.

​
Props

​
style
string
Inline CSS styles (merged with default max-width)
​
children
snippet
required
Container content
All standard HTML table attributes are supported via HTMLTableAttributes.

​
Default Styles

  • max-width: 37.5em (600px) - Standard email width
  • width: 100% - Fluid on smaller screens
  • align: center - Centered in viewport

​
Usage

<Container class="mx-auto my-10 p-5">
  <Heading>Welcome</Heading>
  <Text>Your content here</Text>
</Container>

<Body>
  <Container>
    <Text>Centered content with 600px max width</Text>
  </Container>
</Body>

​
Section

A semantic section wrapper for grouping related content. Uses table-based layout for compatibility.

​
Props

​
children
snippet
required
Section content
All standard HTML table attributes are supported via HTMLTableAttributes.

​
Usage

<Section class="mb-8">
  <Text>Section content</Text>
</Section>

<Container>
  <Section>
    <Heading>Feature Update</Heading>
    <Text>We've added new features</Text>
  </Section>
  
  <Section>
    <Heading>Bug Fixes</Heading>
    <Text>Several bugs were fixed</Text>
  </Section>
</Container>

​
Row

Creates a horizontal row for multi-column layouts. Must contain Column components as children.

​
Props

​
children
snippet
required
Column components
All standard HTML table attributes are supported via HTMLTableAttributes.

​
Usage

<Row>
  <Column>
    <Text>Left column</Text>
  </Column>
  <Column>
    <Text>Right column</Text>
  </Column>
</Row>

<Section>
  <Row>
    <Column>
      <Img src="/product.jpg" width="200" height="200" alt="Product" />
    </Column>
    <Column class="pl-5">
      <Heading as="h3">Product Name</Heading>
      <Text>Product description goes here</Text>
    </Column>
  </Row>
</Section>

​
Column

A table cell (<td>) for use within Row components. Provides column-based layout.

​
Props

​
children
snippet
Column content
​
align
'left' | 'center' | 'right'
Horizontal alignment of content
​
colspan
number
Number of columns to span
All standard HTML td attributes are supported via HTMLTdAttributes.

​
Usage

<Column align="center" style="width: 50%;">
  <Text>Column content</Text>
</Column>

<Row>
  <Column style="width: 50%;">
    <Text>50% width</Text>
  </Column>
  <Column style="width: 50%;">
    <Text>50% width</Text>
  </Column>
</Row>

​
Complete Layout Example

Here’s a complete example combining all layout components: 
<script lang="ts">
  import {
    Html,
    Head,
    Body,
    Container,
    Section,
    Row,
    Column,
    Heading,
    Text,
    Img,
    Button
  } from 'better-svelte-email';
</script>

<Html>
  <Head />
  <Body class="bg-gray-100 font-sans">
    <Container class="mx-auto my-10 rounded bg-white p-8">
      <!-- Header Section -->
      <Section class="mb-8">
        <Row>
          <Column>
            <Img src="/logo.png" width="120" height="40" alt="Logo" />
          </Column>
          <Column align="right">
            <Text class="text-gray-600">Order #12345</Text>
          </Column>
        </Row>
      </Section>

      <!-- Main Content Section -->
      <Section class="mb-8">
        <Heading as="h1" class="mb-4 text-2xl font-bold">
          Order Confirmation
        </Heading>
        <Text class="text-gray-700">
          Thank you for your order! Here are the details:
        </Text>
      </Section>

      <!-- Product Row -->
      <Section class="mb-8 rounded border border-gray-200 p-4">
        <Row>
          <Column style="width: 100px;">
            <Img 
              src="/product.jpg" 
              width="100" 
              height="100" 
              alt="Product"
              class="rounded"
            />
          </Column>
          <Column class="pl-5">
            <Heading as="h3" class="text-lg font-semibold">
              Product Name
            </Heading>
            <Text class="text-gray-600">Quantity: 1</Text>
          </Column>
          <Column align="right" style="width: 80px;">
            <Text class="font-bold">$99.99</Text>
          </Column>
        </Row>
      </Section>

      <!-- Action Section -->
      <Section class="text-center">
        <Button 
          href="https://example.com/orders/12345"
          class="rounded bg-blue-600 px-6 py-3 text-white"
        >
          View Order
        </Button>
      </Section>
    </Container>
  </Body>
</Html>

​
Best Practices

Always use Container as the outermost layout component to ensure proper centering and max-width.
Columns must be direct children of Row components. Don’t nest Rows directly without a Section or Container wrapper.
For responsive layouts, consider using conditional widths or percentage-based widths on Column components.
Use Section to logically group related content and add consistent spacing between groups.

Build docs developers (and LLMs) love

Get started for freeTalk to us