Getting Started

This is a responsive email:

Like a regular HTML template, we can split this one into different parts to fit in a grid.

The body of your email, represented by the mj-body tag contains the entire content of your document:

From here, you can first define your sections:

Inside any section, there should be columns (even if you need only one column). Columns are what makes MJML responsive.

Below, you'll find some basic rules of MJML to keep in mind for later. We'll remind them when useful but better start learning them early on.

Column sizing

Auto sizing

The default behavior of the MJML translation engine is to divide the section space (600px by default, but it can be changed with the width attribute on mj-body) in as many columns as you declare.

<div class="alert alert-note" role="alert"> <p>Note</p> <p>Any MJML component included in a column will have a width equivalent to 100% of this column's width.</p> </div>

Let's take the following layout to illustrate this:

html

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <!-- First column content -->
      </mj-column>
      <mj-column>
        <!-- Second column content -->
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Since the first section defines only 2 columns, the engine will translate that in a layout where each column takes 50% of the total space (300px each). If we add a third one, it goes down to 33%, and with a fourth one to 25%.

Manual sizing

You can also manually set the size of your columns, in pixels or percentage, by using the width attribute on mj-column.

Let's take the following layout to illustrate this:

html

<mjml>
  <mj-body>
    <mj-section>
      <mj-column width="200px">
        <!-- First column content -->
      </mj-column>
      <mj-column width="400px">
        <!-- Second column content -->
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Section gutter

To add consistent spacing between columns, set a gutter on mj-section. The gutter is declared on the section and applies to all of its columns.

html

<mjml>
  <mj-body>
    <mj-section gutter="4%">
      <mj-column>
        <!-- First column content -->
      </mj-column>
      <mj-column>
        <!-- Second column content -->
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

When stacked in a single column on mobile, the gutter will display vertically between the columns.

Note: the gutter is automatically removed from any declared width on mj-column. You do not need to work the values out yourself. e.g. if you declare a 4% gutter and two mj-column instances with 50% width each then the actual displayed width of the column will be 48% with 2% gutters between the two columns.

You can use the existing padding attribute to set spacing between the end columns and the edges.