---
title: "Email component"
description: "The document element: wraps the whole email and sets its theme, preview text and category."
url: https://www.unitpost.com/components/email
section: Components
updated: 2026-09-09
---
# Email component

## <Email>

> The document element: wraps the whole email and sets its theme, preview text and category.

Optional, at most one, and always the outermost element. Its attributes are the page-level settings the Design tab's Page & body panel edits: one parse sets the look along with the blocks, so a branded email is a single write. Without it, the blocks keep the template's current theme.

```tsx
<Email background-color="#f5f5f4" body-color="#ffffff" content-width={560} body-radius={16} body-padding={0} category="marketing" preview-text="What we shipped this month">
  <Section padding-x={24} padding-y={24}>
    <Heading level={1}>Hello {{first_name}}</Heading>
  </Section>
</Email>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `background-color` | color | #f4f4f5 | Page backdrop around the email card. |
| `body-color` | color | #ffffff | The email card's background. |
| `content-width` | number | 600 | Card width (px). 560–640 reads best. |
| `body-padding` | number | 24 | Padding inside the card (px). 0 lets full-width sections reach the edges (they bring their own padding). |
| `body-radius` | number | 0 | Card corner radius (px). |
| `body-border-width` | number | — | Stroke around the card (px); its corners follow body-radius. |
| `body-border-style` | enum | — | Stroke style. |
| `body-border-color` | color | #e4e4e7 | Stroke color. |
| `font-family` | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif | Default font stack (email-safe fonts, with fallbacks). |
| `text-color` | color | #1a1a1a | Default text color. |
| `link-color` | color | #2563eb | Inline link color. |
| `dark-mode` | enum | — | "auto" opts in to dark mode: in mail apps set to dark, the card, its text and its links switch to a dark palette (copy on its own background keeps its colours). "off" declares the email light-only. Unset, the email renders as it always has. |
| `dark-colors` | string | — | The dark palette as an object, e.g. {{ bodyColor: "#111111", textColor: "#f5f5f5" }} (backgroundColor, bodyColor, textColor, linkColor). Unset colours are derived. |
| `preview-text` | string | — | Inbox preview text: the snippet shown after the subject. |
| `category` | enum | — | Marketing emails get the managed unsubscribe / postal footer at send — never write it yourself. |

## Related

- [Section component](https://www.unitpost.com/components/section): A padded layout container that groups blocks with a background.
- [Row component](https://www.unitpost.com/components/row): A multi-column container — holds <Column> children side by side.
- [Column component](https://www.unitpost.com/components/column): A vertical slice of a Row. Only valid inside <Row>.