PhoenixEmail.Components (PhoenixEmail v0.1.0)

HEEx function components for building emails, ported from react-email.

Every component renders client-compatible HTML (tables for layout, inline styles, MSO conditional comments for Outlook) and accepts a style attribute with either an inline CSS string or a style object (map or keyword list), e.g. style={%{"font-size" => "14px", padding: 12}}. Default styles are merged with the user's, user styles last so they win by cascade. All other HTML attributes are forwarded to the underlying tag.

use PhoenixEmail

def welcome(assigns) do
  ~H"""
  <.email>
    <.head />
    <.preview>What the inbox shows next to the subject</.preview>
    <.body>
      <.container>
        <.heading as="h1">Hello</.heading>
        <.text>Welcome aboard.</.text>
        <.button href="https://example.com" style="padding:12px 20px">Start</.button>
      </.container>
    </.body>
  </.email>
  """
end

Summary

Functions

body(assigns)

The <body> of the email.

button(assigns)

A link styled as a button.

code_block(assigns)

A block of code with inline-styled syntax highlighting.

code_inline(assigns)

A piece of inline code.

column(assigns)

A column (<td>) inside a <.row>.

container(assigns)

Centered layout table that caps the email width at 37.5em (600px).

email(assigns)

Root element of the email. Renders the <html> tag.

font(assigns)

A web font, declared inside <.head>.

head(assigns)

The <head> of the email, with the content-type and Apple message reformatting meta tags. Put <.font> and extra meta tags in the slot.

heading(assigns)

A heading (h1–h6, chosen with as).

hr(assigns)

A horizontal divider.

img(assigns)

An image with the resets email clients need.

link(assigns)

A hyperlink, opening in a new tab by default.

markdown(assigns)

Markdown rendered as email-safe HTML with inline styles.

preview(assigns)

Preview text shown by inboxes next to the subject line.

row(assigns)

A table row. Put <.column> components in the slot.

section(assigns)

Full-width layout table used to group content into blocks.

text(assigns)

A paragraph of text.

tw(classes)

Translates Tailwind utilities to an inline style string.

Functions

body(assigns)

The <body> of the email.

Attributes

class (:string) - tailwind utilities, see PhoenixEmail.Tailwind. Defaults to nil.
style (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

button(assigns)

A link styled as a button.

Padding declared in style (shorthand or longhands, px) is parsed and reproduced with MSO conditional comments so the button keeps its size in Outlook, which ignores padding on <a> tags — the same hack react-email uses.

Attributes

href (:string) (required)
target (:string) - Defaults to nil.
class (:string) - tailwind utilities, see PhoenixEmail.Tailwind. Defaults to nil.
style (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

code_block(assigns)

A block of code with inline-styled syntax highlighting.

Highlighting requires the optional :makeup dependency plus a lexer for the language (for example :makeup_elixir); without them — or for unknown languages — the code renders escaped but unstyled.

The theme is a map from makeup token type to inline CSS, plus a :base entry for the <pre> tag. See PhoenixEmail.Highlight.default_theme/0.

<.code_block language="elixir" code={~S'''
defmodule Hello do
  def world, do: :ok
end
'''} />

Attributes

code (:string) (required)
language (:string) - Defaults to nil.
theme (:map) - Defaults to nil.
class (:string) - tailwind utilities, see PhoenixEmail.Tailwind. Defaults to nil.
style (:any) - Defaults to nil.
Global attributes are accepted.

code_inline(assigns)

A piece of inline code.

Attributes

class (:string) - tailwind utilities, see PhoenixEmail.Tailwind. Defaults to nil.
style (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

column(assigns)

A column (<td>) inside a <.row>.

Attributes

class (:string) - tailwind utilities, see PhoenixEmail.Tailwind. Defaults to nil.
style (:any) - Defaults to nil.
Global attributes are accepted. Supports all globals plus: ["align", "valign", "width", "height", "bgcolor"].

Slots

inner_block (required)

container(assigns)

Centered layout table that caps the email width at 37.5em (600px).

Attributes

class (:string) - tailwind utilities, see PhoenixEmail.Tailwind. Defaults to nil.
style (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

email(assigns)

Root element of the email. Renders the <html> tag.

Named email instead of html to read naturally alongside the other components.

Attributes

lang (:string) - Defaults to "en".
dir (:string) - Defaults to "ltr".
Global attributes are accepted.

Slots

inner_block (required)

font(assigns)

A web font, declared inside <.head>.

Renders a <style> tag with an @font-face rule (plus mso-font-alt for Outlook) and applies the family to every element.

<.font
  font_family="Roboto"
  fallback_font_family="Verdana"
  web_font={%{url: "https://fonts.gstatic.com/.../roboto.woff2", format: "woff2"}}
/>

Attributes

font_family (:string) (required)
fallback_font_family (:string) - Defaults to "Verdana".
web_font (:map) - a map with :url and :format keys. Defaults to nil.
font_weight (:any) - Defaults to 400.
font_style (:string) - Defaults to "normal".

head(assigns)

The <head> of the email, with the content-type and Apple message reformatting meta tags. Put <.font> and extra meta tags in the slot.

Attributes

Global attributes are accepted.

Slots

inner_block

heading(assigns)

A heading (h1–h6, chosen with as).

Margins can be set with the shorthand attributes m, mx, my, mt, mr, mb and ml. Numbers are treated as px; strings are used as-is.

Attributes

as (:string) - Defaults to "h1". Must be one of "h1", "h2", "h3", "h4", "h5", or "h6".
class (:string) - tailwind utilities, see PhoenixEmail.Tailwind. Defaults to nil.
style (:any) - Defaults to nil.
m (:any) - Defaults to nil.
mx (:any) - Defaults to nil.
my (:any) - Defaults to nil.
mt (:any) - Defaults to nil.
mr (:any) - Defaults to nil.
mb (:any) - Defaults to nil.
ml (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

hr(assigns)

A horizontal divider.

Attributes

class (:string) - tailwind utilities, see PhoenixEmail.Tailwind. Defaults to nil.
style (:any) - Defaults to nil.
Global attributes are accepted.

img(assigns)

An image with the resets email clients need.

Attributes

src (:string) (required)
alt (:string) - Defaults to nil.
width (:any) - Defaults to nil.
height (:any) - Defaults to nil.
class (:string) - tailwind utilities, see PhoenixEmail.Tailwind. Defaults to nil.
style (:any) - Defaults to nil.
Global attributes are accepted.

link(assigns)

A hyperlink, opening in a new tab by default.

Attributes

href (:string) (required)
target (:string) - Defaults to "_blank".
class (:string) - tailwind utilities, see PhoenixEmail.Tailwind. Defaults to nil.
style (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

markdown(assigns)

Markdown rendered as email-safe HTML with inline styles.

Requires the optional :earmark_parser dependency. Override the default per-tag styles with the styles map (tag name to inline CSS); see PhoenixEmail.Markdown.default_styles/0.

<.markdown content={@changelog} styles={%{h1: "color:#5e6ad2"}} />

Attributes

content (:string) (required)
styles (:map) - Defaults to %{}.
container_style (:any) - Defaults to nil.
Global attributes are accepted.

preview(assigns)

Preview text shown by inboxes next to the subject line.

Renders a hidden div with the slot text (capped at 150 characters) padded with invisible characters so clients don't leak the email body into the preview. Excluded from the plain text version.

Attributes

Global attributes are accepted.

Slots

inner_block (required)

row(assigns)

A table row. Put <.column> components in the slot.

Attributes

class (:string) - tailwind utilities, see PhoenixEmail.Tailwind. Defaults to nil.
style (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

section(assigns)

Full-width layout table used to group content into blocks.

Attributes

class (:string) - tailwind utilities, see PhoenixEmail.Tailwind. Defaults to nil.
style (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

text(assigns)

A paragraph of text.

Attributes

class (:string) - tailwind utilities, see PhoenixEmail.Tailwind. Defaults to nil.
style (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

tw(classes)

Translates Tailwind utilities to an inline style string.

Components take a class attribute directly; use tw/1 for raw HTML tags inside templates, where react-email's <Tailwind> would also inline:

<span style={tw("text-black")}>{@username}</span>