Clerk.io uses a email rendering framework called MJML to produce responsive HTML designs that can displayed properly on the widest range of email clients as possible.

This framework is only used in the emails which are sent Clerk.io, and not for the embedded email recommendations included in emails sent by other providers.

Here is a simple example of a template:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="100px" src="https://global-uploads.webflow.com/63357df7224a8a49353f3636/63381c44a918c228b61fd12e_Logo.svg"></mj-image>
        <mj-divider border-color="#F45E43"></mj-divider>
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Welcome to Clerk</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Default Templates

When selecting an Auto Email design you have the option to select an MJML template for the email content in question. We provide a few MJML templates to select out of the box which already have layouts with expressions for products loops, client names and placeholder measurements.

These templates are provided as code, and can be expanded as desired.

Inserting Values and Logic

You can enrich your MJML templates using variables and logic. These are expressed using the Jinja2 template language.

You print a value by placing it between {{ and }}.

You evaluate a logic statement by placing ti between {% and %}.

You add a multi-line comment by placing it between {# and #}.

Template variables

You can assign variables to make your design easily changeable (instead of having the same value inserted multiple places). They need to be prefixed by __design__otherwise you will be required to set a value for them when using the Design in a Content.

{% assign __design__price_color = '#333' %}

Extending Layouts

If you would like to build your layout from scratch, or to simply extend one of the existing templates, you can do so using any of the native components provided by the MJML framework.

The allowed components and their permissible attributes can be found here.

Even though MJML supports extension via custom components, we do not. Thus, you must ensure that the component you are using is listed in the standard body options and that you are following the nesting rules defined for said component. Eg. <mj-row> can only be inside <mj-section>, and not directly in <mj-body>.