# Container & Section

> Center content at email-safe widths and group it into sections.

**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  


---



### Layout building blocks

`EmailContainer` centers your content with a 600px max-width — the standard for
email readability. `EmailSection` groups related content so each block can have
its own background, padding, and rounded corners. A typical email stacks
header, content, and footer sections inside one container.


Source code:


```python
# File: docs/container-section/container_section.py

import dash_email as de

component = de.Email([
    de.EmailBody(
        style={"backgroundColor": "#eef2f6", "padding": "32px 0"},
        children=[
            de.EmailContainer(
                style={"maxWidth": "600px"},
                children=[
                    de.EmailSection(
                        style={
                            "backgroundColor": "#1a1a2e",
                            "padding": "24px",
                            "textAlign": "center",
                            "borderRadius": "8px 8px 0 0",
                        },
                        children=[
                            de.EmailHeading(
                                "Header Section",
                                as_="h3",
                                style={"color": "#ffffff", "margin": 0},
                            ),
                        ],
                    ),
                    de.EmailSection(
                        style={"backgroundColor": "#ffffff", "padding": "24px"},
                        children=[
                            de.EmailText(
                                "EmailContainer centers content at 600px — the "
                                "de-facto standard email width. EmailSection "
                                "groups related blocks so each area can carry "
                                "its own background and padding."
                            ),
                        ],
                    ),
                    de.EmailSection(
                        style={
                            "backgroundColor": "#f8f9fa",
                            "padding": "16px 24px",
                            "textAlign": "center",
                            "borderRadius": "0 0 8px 8px",
                        },
                        children=[
                            de.EmailText(
                                "Footer section",
                                style={"color": "#999999", "fontSize": "12px", "margin": 0},
                            ),
                        ],
                    ),
                ],
            )
        ],
    )
])
```


---

### EmailContainer


**EmailContainer**

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


---

### EmailSection


**EmailSection**

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


---

*Source: /components/container-section*