Full Templates

Complete, copy-paste-ready email templates combining all the components.

Newsletter

A classic three-section newsletter: branded header, article content with CTA, and a compliance footer.

Source code:

# File: docs/templates/newsletter.py

import dash_email as de

component = de.Email([
    de.EmailPreview("This week's top stories and updates"),
    de.EmailBody(
        style={"backgroundColor": "#f0f0f0", "padding": "24px 0"},
        children=[
            de.EmailContainer([
                # Header
                de.EmailSection(
                    style={
                        "backgroundColor": "#1a1a2e",
                        "padding": "30px",
                        "textAlign": "center",
                        "borderRadius": "8px 8px 0 0",
                    },
                    children=[
                        de.EmailHeading(
                            "Weekly Newsletter",
                            as_="h1",
                            style={"color": "#ffffff", "margin": 0},
                        )
                    ],
                ),
                # Content
                de.EmailSection(
                    style={"backgroundColor": "#ffffff", "padding": "40px"},
                    children=[
                        de.EmailHeading("Featured Article", as_="h2"),
                        de.EmailText(
                            "Lorem ipsum dolor sit amet, consectetur adipiscing "
                            "elit. Sed do eiusmod tempor incididunt ut labore et "
                            "dolore magna aliqua.",
                            style={"lineHeight": "1.7", "color": "#495057"},
                        ),
                        de.EmailButton(
                            "Read More",
                            href="https://example.com",
                            style={
                                "backgroundColor": "#228be6",
                                "color": "#ffffff",
                                "padding": "10px 24px",
                                "borderRadius": "4px",
                            },
                        ),
                        de.EmailDivider(style={"margin": "30px 0"}),
                        de.EmailHeading("Quick Links", as_="h3"),
                        de.EmailText([
                            de.EmailLink(
                                "Product updates",
                                href="https://example.com",
                                style={"color": "#1971c2"},
                            ),
                            " · ",
                            de.EmailLink(
                                "Community forum",
                                href="https://example.com",
                                style={"color": "#1971c2"},
                            ),
                            " · ",
                            de.EmailLink(
                                "Blog",
                                href="https://example.com",
                                style={"color": "#1971c2"},
                            ),
                        ]),
                    ],
                ),
                # Footer
                de.EmailSection(
                    style={
                        "padding": "20px",
                        "textAlign": "center",
                        "borderRadius": "0 0 8px 8px",
                        "backgroundColor": "#f8f9fa",
                    },
                    children=[
                        de.EmailText(
                            "You received this because you subscribed. "
                            "Unsubscribe at any time.",
                            style={"color": "#999999", "fontSize": "12px"},
                        )
                    ],
                ),
            ])
        ],
    ),
])

Order confirmation

A transactional receipt using EmailRow/EmailColumn for line items and totals.

Source code:

# File: docs/templates/order_confirmation.py

import dash_email as de

ROW_STYLE = {"padding": "6px 0"}

component = de.Email([
    de.EmailPreview("Your order #12345 has been confirmed"),
    de.EmailBody(
        style={"backgroundColor": "#f6f9fc", "padding": "24px 0"},
        children=[
            de.EmailContainer([
                de.EmailSection(
                    style={
                        "backgroundColor": "#ffffff",
                        "padding": "40px",
                        "borderRadius": "8px",
                    },
                    children=[
                        de.EmailHeading("Order Confirmed! 🎉", as_="h1"),
                        de.EmailText(
                            "Thank you for your purchase. Here's a summary of "
                            "your order #12345."
                        ),
                        de.EmailDivider(),
                        de.EmailRow([
                            de.EmailColumn(
                                style={"width": "70%", **ROW_STYLE},
                                children=[de.EmailText("Mechanical Keyboard")],
                            ),
                            de.EmailColumn(
                                style={"width": "30%", "textAlign": "right", **ROW_STYLE},
                                children=[de.EmailText("$99.00")],
                            ),
                        ]),
                        de.EmailRow([
                            de.EmailColumn(
                                style={"width": "70%", **ROW_STYLE},
                                children=[de.EmailText("USB-C Cable")],
                            ),
                            de.EmailColumn(
                                style={"width": "30%", "textAlign": "right", **ROW_STYLE},
                                children=[de.EmailText("$12.00")],
                            ),
                        ]),
                        de.EmailDivider(),
                        de.EmailRow([
                            de.EmailColumn(
                                style={"width": "70%", **ROW_STYLE},
                                children=[
                                    de.EmailText(
                                        "Total",
                                        style={"fontWeight": "bold"},
                                    )
                                ],
                            ),
                            de.EmailColumn(
                                style={"width": "30%", "textAlign": "right", **ROW_STYLE},
                                children=[
                                    de.EmailText(
                                        "$111.00",
                                        style={"fontWeight": "bold"},
                                    )
                                ],
                            ),
                        ]),
                        de.EmailButton(
                            "Track Your Order",
                            href="https://example.com/track",
                            style={
                                "backgroundColor": "#28a745",
                                "color": "#ffffff",
                                "padding": "14px 28px",
                                "borderRadius": "4px",
                                "marginTop": "16px",
                            },
                        ),
                    ],
                )
            ])
        ],
    ),
])

Build your own with AI

The Email Builder at /email-builder generates templates like these from a plain-English prompt using Google Gemini, previews them live, and exports ready-to-paste dash_email code.

Source: /templates