Cerberus-based responsive email components for Phoenix.
Cross-client-tested layout built on the Cerberus email framework (table-based layout, MSO/Outlook conditional comments, mobile stacking via media queries). Branding is passed as attrs — not hardcoded — so the same components work for any product.
Summary
Functions
Renders a button row with centered primary action button.
Renders a content block with white background for email content.
Renders the main email layout with Cerberus styling.
Renders a simple one-column text block without buttons.
Renders a one-column text block with optional heading and button.
Renders a secondary button row with outlined styling.
Renders a spacer for adding vertical space between email sections.
Renders a text content row with standard padding and typography.
Functions
Renders a button row with centered primary action button.
Examples
<.email_button_row url="https://example.com/confirm" text="Confirm Email" />Attributes
url(:string) (required) - Button destination URL.text(:string) (required) - Button text.primary_color(:string) - Button background color. Defaults to"#3b82f6".style(:string) - Additional button styles. Defaults tonil.
Renders a content block with white background for email content.
Examples
<.email_content_block>
<.email_text_row>
<p>Your email content here</p>
</.email_text_row>
</.email_content_block>Slots
inner_block(required)
Renders the main email layout with Cerberus styling.
Examples
<.email_layout brand_name="Acme" footer_text="Acme Inc — acme.example.com" preview_text="Welcome!">
<.email_content_block>
<!-- email content here -->
</.email_content_block>
</.email_layout>Attributes
preview_text(:string) - Preview text shown in email clients. Defaults tonil.email_title(:string) - Email <title>; falls back to brand_name. Defaults tonil.show_header(:boolean) - Whether to show the header with brand name. Defaults totrue.brand_name(:string) - Product name shown in header and footer. Defaults to"App".footer_text(:string) - Footer line; falls back to brand_name. Defaults tonil.primary_color(:string) - Button/accent color. Defaults to"#3b82f6".font_family(:string) - Font stack used across the email. Defaults to"'Inter', sans-serif".
Slots
inner_block(required)
Renders a simple one-column text block without buttons.
Examples
<.email_one_column_text>
<p>This is a simple text block.</p>
</.email_one_column_text>Slots
inner_block(required)
Renders a one-column text block with optional heading and button.
Examples
<.email_one_column_text_button
heading="Welcome!"
button_text="Get Started"
button_url="https://example.com/start">
<p>Click below to get started.</p>
</.email_one_column_text_button>Attributes
heading(:string) - Optional heading text. Defaults tonil.button_text(:string) - Button text (button only shown if provided). Defaults tonil.button_url(:string) - Button URL (required if button_text provided). Defaults tonil.primary_color(:string) - Button color, passed through to email_button_row. Defaults to"#3b82f6".
Slots
inner_block(required)
Renders a secondary button row with outlined styling.
Examples
<.email_secondary_button_row url="https://example.com/help" text="Need Help?" />Attributes
url(:string) (required) - Button destination URL.text(:string) (required) - Button text.style(:string) - Additional button styles. Defaults tonil.
Renders a spacer for adding vertical space between email sections.
Examples
<.email_spacer height="20" />Attributes
height(:string) - Height of spacer in pixels. Defaults to"20".
Renders a text content row with standard padding and typography.
Examples
<.email_text_row>
<h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333; font-weight: normal;">
Welcome!
</h1>
<p style="margin: 0 0 10px;">Thank you for joining!</p>
</.email_text_row>Attributes
style(:string) - Additional inline styles. Defaults tonil.
Slots
inner_block(required)