Responsive Email Blocks

Responsive Email Blocks

Inline Email v3 includes a small set of semantic email blocks that compile to conservative table markup before CSS is inlined.

Example

<email>
  <preview>{{featureCount}} ACME features your team can start using this week.</preview>
  <container>
    <section padding="36">
      <brand mark="A">ACME</brand>
      {{#features}}
      <panel tone="{{tone}}">
        <p>{{title}}</p>
        <p>{{description}}</p>
      </panel>
      <spacer size="14" />
      {{/features}}
      <button href="{{featuresUrl}}">See all features</button>
    </section>
    <footer>Sent by Freethinking IT</footer>
  </container>
</email>

Supported Blocks

<email>       Full document wrapper with mobile media rules.
<preview>     Hidden inbox preview text.
<container>   Centered 600px email body.
<section>     Padded content block.
<columns>     Table row for columns.
<column>      Responsive column that stacks on small screens.
<button>      Table-based CTA button.
<brand>       Small wordmark/header lockup.
<image>       Responsive email-safe image.
<hero-image>  Wide responsive image with rounded corners.
<spacer>      Email-safe vertical spacing.
<divider>     Horizontal rule using table markup.
<otp>         One-time code display block.
<alert>       Inline warning/info/success/danger notice.
<panel>       Bordered content panel.
<footer>      Muted footer section.

Vanilla Tones

<alert> and <panel> include a small vanilla tone set:

<alert tone="warning">This link expires soon.</alert>
<panel tone="success">Your workspace is ready.</panel>

Supported tones:

neutral
info
success
warning
danger

Override tone colors at render time when needed:

compiled.render({
  data,
  style: {
    tones: {
      info: {
        background: '#eff8ff',
        border: '#b2ddff',
        text: '#1849a9',
        accent: '#1570ef'
      }
    }
  }
});

Responsive CSS

Media queries are preserved in <style> tags so email clients can apply responsive behavior. Normal selectors are inlined and removed when possible.