# Image & Divider

> Images with explicit dimensions and horizontal rules for separating content.

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


---



### Media & separation

`EmailImage` renders an `<img>` with explicit dimensions — required for stable
layouts since many clients block remote images by default. `EmailDivider`
renders an `<hr>` for visual separation between blocks.


Source code:


```python
# File: docs/image-divider/image_divider.py

import dash_email as de

component = de.Email([
    de.EmailBody(
        style={"backgroundColor": "#f6f9fc", "padding": "32px 0"},
        children=[
            de.EmailContainer([
                de.EmailSection(
                    style={
                        "backgroundColor": "#ffffff",
                        "borderRadius": "8px",
                        "padding": "32px",
                        "textAlign": "center",
                    },
                    children=[
                        de.EmailImage(
                            src="https://picsum.photos/seed/dash-email/536/200",
                            alt="Hero banner",
                            width=536,
                            height=200,
                            style={"borderRadius": "8px", "maxWidth": "100%"},
                        ),
                        de.EmailHeading("Hero images", as_="h3"),
                        de.EmailText(
                            "Always set explicit width/height and an alt text — "
                            "many clients block images until the reader opts in."
                        ),
                        de.EmailDivider(
                            style={"borderColor": "#dee2e6", "margin": "24px 0"}
                        ),
                        de.EmailText(
                            "EmailDivider renders an <hr> to separate content "
                            "blocks.",
                            style={"color": "#868e96"},
                        ),
                    ],
                )
            ])
        ],
    )
])
```


---

### EmailImage


**EmailImage**

| Name | Type | Description |
| --- | --- | --- |
| id | string; optional | The ID used to identify this component in Dash callbacks. |
| alt | string; default '' | Alternative text for the image. |
| height | number \| string; optional | The height of the image (number or string). |
| src | string; required | The image source URL. Should be an absolute URL for production. |
| width | number \| string; optional | The width of the image (number or string like "100%"). |


---

### EmailDivider


**EmailDivider**

| Name | Type | Description |
| --- | --- | --- |
| id | string; optional | The ID used to identify this component in Dash callbacks. |


---

*Source: /components/image-divider*