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.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
backgroundColor | color | #f4f4f5 | Page backdrop around the email card. |
bodyColor | color | #ffffff | The email card's background. |
contentWidth | number | 600 | Card width (px). 560–640 reads best. |
bodyPadding | number | 24 | Padding inside the card (px). 0 lets full-width sections reach the edges (they bring their own padding). |
bodyRadius | number | 0 | Card corner radius (px). |
bodyBorderWidth | number | — | Stroke around the card (px); its corners follow body-radius. |
bodyBorderStyle | enumsolid | dashed | dotted | — | Stroke style. |
bodyBorderColor | color | #e4e4e7 | Stroke color. |
fontFamily | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif | Default font stack (email-safe fonts, with fallbacks). |
textColor | color | #1a1a1a | Default text color. |
linkColor | color | #2563eb | Inline link color. |
darkMode | enumauto | off | — | "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. |
darkColors | string | — | The dark palette as an object, e.g. {{ bodyColor: "#111111", textColor: "#f5f5f5" }} (backgroundColor, bodyColor, textColor, linkColor). Unset colours are derived. |
previewText | string | — | Inbox preview text: the snippet shown after the subject. |
category | enumtransactional | marketing | — | Marketing emails get the managed unsubscribe / postal footer at send — never write it yourself. |
Common props
Every component accepts these on top of its own props.
| Prop | Type | Default | Description |
|---|---|---|---|
marginBottom | number | 16 | Vertical space (px) below the block. |
className | string | — | Tailwind-style utility classes compiled to inline CSS at render (e.g. "mt-4 text-zinc-500 sm:hidden"). Responsive/pseudo variants are hoisted into a <style> block. class and tw are accepted as aliases in code. |
customCss | css | — | Extra inline CSS declarations merged onto the block's root element (e.g. "letter-spacing: 1px; opacity: 0.9"). Inlined so it survives every client. |
Set one side at a time with the padding and margin objects in the visual editor's inspector.