# Email Structure

> The root components every email template needs — Email, EmailHead, EmailPreview, and EmailBody.

**Site index:** [https://email.2plot.dev/llms.txt](https://email.2plot.dev/llms.txt) — every page on this site, as Markdown.  
**Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites.  
**Sibling sites:** 13 more in The 2plot network — listed in the site index above.  
**Sitemap:** https://email.2plot.dev/sitemap.xml  


---



### Anatomy of an email

Four components form the skeleton of every template:

- `Email` — the root wrapper (equivalent to React Email's `Html`)
- `EmailHead` — metadata such as the document title and font imports
- `EmailPreview` — the snippet shown next to the subject line in the inbox, hidden in the body
- `EmailBody` — the visible content wrapper


Source code:


```python
# File: docs/email-structure/structure.py

import dash_email as de

component = de.Email(
    lang="en",
    dir="ltr",
    children=[
        de.EmailHead(),
        de.EmailPreview("Your March summary is ready — open to see the highlights."),
        de.EmailBody(
            style={"backgroundColor": "#f0f4f8", "padding": "32px 0"},
            children=[
                de.EmailContainer([
                    de.EmailSection(
                        style={
                            "backgroundColor": "#ffffff",
                            "borderRadius": "8px",
                            "padding": "32px",
                        },
                        children=[
                            de.EmailHeading("Monthly Update", as_="h2"),
                            de.EmailText(
                                "The preview text above is hidden in the rendered "
                                "email body but shows next to the subject line in "
                                "the recipient's inbox."
                            ),
                        ],
                    )
                ])
            ],
        ),
    ],
)
```


---

### Email


**Email**

| Name | Type | Description |
| --- | --- | --- |
| children | a list of or a singular dash component, string or number; optional | The children of this component (EmailHead, EmailPreview,     EmailBody, etc.). |
| id | string; optional | The ID used to identify this component in Dash callbacks. |
| dir | a value equal to: 'ltr', 'rtl'; default 'ltr' | Text direction of the email content. |
| lang | string; default 'en' | Language of the email content. |


---

### EmailHead


**EmailHead**

| Name | Type | Description |
| --- | --- | --- |
| children | a list of or a singular dash component, string or number; optional | The children of this component (EmailFont, style elements, etc.). |
| id | string; optional | The ID used to identify this component in Dash callbacks. |


---

### EmailPreview


**EmailPreview**

| Name | Type | Description |
| --- | --- | --- |
| children | a list of or a singular dash component, string or number; optional | The preview text to display in email client inboxes. |
| id | string; optional | The ID used to identify this component in Dash callbacks. |


---

### EmailBody


**EmailBody**

| Name | Type | Description |
| --- | --- | --- |
| children | a list of or a singular dash component, string or number; optional | The children of this component (EmailContainer, EmailSection,     etc.). |
| id | string; optional | The ID used to identify this component in Dash callbacks. |


---

*Source: /components/email-structure*