CerberusEmail.Components (cerberus_email v0.1.0)

Copy Markdown View Source

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

email_button_row(assigns)

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 to nil.

email_content_block(assigns)

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)

email_layout(assigns)

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 to nil.
  • email_title (:string) - Email <title>; falls back to brand_name. Defaults to nil.
  • show_header (:boolean) - Whether to show the header with brand name. Defaults to true.
  • brand_name (:string) - Product name shown in header and footer. Defaults to "App".
  • footer_text (:string) - Footer line; falls back to brand_name. Defaults to nil.
  • 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)

email_one_column_text(assigns)

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)

email_one_column_text_button(assigns)

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 to nil.
  • button_text (:string) - Button text (button only shown if provided). Defaults to nil.
  • button_url (:string) - Button URL (required if button_text provided). Defaults to nil.
  • primary_color (:string) - Button color, passed through to email_button_row. Defaults to "#3b82f6".

Slots

  • inner_block (required)

email_secondary_button_row(assigns)

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 to nil.

email_spacer(assigns)

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".

email_text_row(assigns)

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 to nil.

Slots

  • inner_block (required)