# `PhoenixEmail.Components` [🔗](https://github.com/gabrielperales/phoenix-email/blob/v0.1.2/lib/phoenix_email/components.ex#L1) HEEx function components for building emails, ported from [react-email](https://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 <.body> <.container> <.heading as="h1">Hello <.text>Welcome aboard. <.button href="https://example.com" style="padding:12px 20px">Start """ end # `body` The `` 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` 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 `` 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` 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 `
` 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`

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`

A column (``) 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`

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`

Root element of the email. Renders the `` 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`

A web font, declared inside `<.head>`.

Renders a `