scalero-logo

MJML examples to get you started

5-excuses_2_blog.jpg

Kristina Lauren

January 18, 2022

MJML Examples to Get You Started

Whether you’re a beginner when it comes to coding or you’re already quite familiar with HTML, MJML is one of the easiest markup languages to learn. If you’re looking for a straightforward cheat sheet with examples of the most common pieces of MJML code you’ll need, this post is for you. Be sure to also check out our guide on how to build an email from scratch using MJML for even more tips.

How to Install MJML

Here are a few options:

  • https://mjml.io/try-it-live - This is probably the simplest way to use MJML, because you can code directly inside your browser.
  • Download the MJML app – this is basically an MJML desktop app, so you’ll be able to use it without internet access and it comes with a live preview function.
  • Atom Plugin – If you already use the app Atom to code HTML, you can use this MJML Github bundle as an add-on. It includes error-spotting and a live preview feature like the MJML app.
  • Visual Studio Code plugin – This plugin has all the features from the options above, including the ability to send emails with Nodemailer or Mailjet.
  • Sublime Text Plugin – Simply highlights MJML code.
  • Node.js – For those a little more experienced with web development, you can install MJML using npm.

Scalero also supports MJML so our users have access to it when creating templates.


How to Start Coding MJML

Below is the foundational layout for your MJML code. As you build out your email, you’ll slowly nest more and more components within these starter tags.

mjml text rendering example
<mjml>
  <mj-head>

  </mj-head>
  <mj-body>

  </mj-body>
</mjml>

Standard MJML Head Components

MJML components in the head tag may not all be visible within your email, but they’re just as crucial as your body elements. Let’s go over a few of the most important ones.

MJML Attributes and All

In MJML, <mj-attributes> enables you to assign default values for all the listed components under the tag. For example, in the code, you can see that we've made all the padding for our text “0”.

You can use <mj-all> to apply an attribute to all components. Notice in the code below that because we assigned “Arial” as the font-family, all text in the email will automatically be Arial font. However, you can later override <mj-all> by adding a different font-family attribute to <mj-text>, such as font-family=“Times”.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text padding="0" />
      <mj-class name="blue" color: #2a72d5 !important; />
      <mj-class name="big" font-size="20px" />
      <mj-all font-family="Arial" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text mj-class="blue big">
          This text is in Arial font.
        </mj-text>
        <mj-text mj-class="blue big" font-family="Times">
          This text is in Times font.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

You may be wondering what the main difference between <mj-attributes> and <mj-all> is. They’re pretty much the same, except that <mj-all> affects all MJML components using just the one tag instead of a list of tags nested within it.

Classes

When it comes to MJML classes, using <mj-class> allows you to name and assign a value to a group of attributes to manipulate components. To apply them, use mj-class="<name>". You can give the class any name you want but the value you assign to it will need to be an actual styling attribute. In the code above, since we wanted to make our text blue, we gave it the name “blue” and used the styling attribute color=”blue”. We also did the same with the font size. Then, in the body section, using mj-class, you can simply input the names of the classes to see the effects.

Styles

<mj-style> lets you define CSS styles for the HTML in your code, similarly to how you would with internal CSS. In our example, we created the class .blue-text with styling attributes to underline and color the text blue.

<mjml>
  <mj-head>
    <mj-style>
      .blue-text div {
      color: blue !important;
      text-decoration: underline !important;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text css-class="blue-text">I'm blue and underlined</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Breakpoints

<mj-breakpoint> lets you control at which point your layout should switch from desktop to mobile view.

<mjml>
  <mj-head>
    <mj-breakpoint width="320px" />
  </mj-head>

Preview Text/Preheader Text

In MJML, you can customize your preview text (that is, the text under your email subject line) using <mj-preview>.

<mjml>
  <mj-head>
    <mj-preview>Hello, Friend</mj-preview>
  </mj-head>

Fonts

<mj-font> allows you to import fonts in MJML, which is helpful if you want to use a custom font in your emails. You can use a source like https://fonts.google.com/ to access hundreds of fonts and just include the URL in the code. The only caveat is that custom fonts don’t always work with major email clients, including Gmail, surprisingly. Check out one of our previous blog posts to learn more about how to pick the best email-safe fonts.

mj font component rendering example
<mjml>
  <mj-head>
    <mj-font name="Montserrat" href="https://fonts.googleapis.com/css2?family=Montserrat" />
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-family="Montserrat, sans-serif">
          Welcome to Scalero!
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Standard MJML Body Components

Now we move into MJML body components, which will be responsible for creating the visible content in your emails. Let’s start by understanding how to give your design some basic organization.

Sections and Columns

MJML Sections behave like rows in an email and are used to give structure to your layout. Columns, on the other hand, allow you to organize your layout horizontally. It’s important to nest the <mj-column> tag within the <mj-section> tag in order for it to work, but columns can’t be nested within columns and neither can sections.

mj column component rendering example
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>1st column</mj-text>
      </mj-column>
      <mj-column>
        <mj-text>2nd column</mj-text>
      </mj-column>
      <mj-column>
        <mj-text>3rd column</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Groups

<mj-group> comes in handy when you want to keep MJML columns from stacking in mobile. When you use this component, your columns will stay side-by-side on both desktop and mobile. Also be aware that if you need to set a width for your columns on desktop, you should use percentages instead of pixels so that the columns adapt to the viewport of the browser in use.

mj group component rendering example
<mjml>
  <mj-body>
    <mj-section>
      <mj-group>
        <mj-column>
          <mj-image width="137px" height="185px" padding="0" src="https://scalero.io/_next/image?url=https%3A%2F%2Fmedia.cms.scalero.io%2Fmedia%2Fimages%2FEmail-Marketing.original.png&w=2048&q=75" />
          <mj-text align="center">
            <h2>Email Marketing</h2>
            <p>At Scalero, you get email strategists, designers, and developers all in one place.</p>
          </mj-text>
        </mj-column>
        <mj-column>
          <mj-image width="166px" height="185px" padding="0" src="https://scalero.io/_next/image?url=https%3A%2F%2Fmedia.cms.scalero.io%2Fmedia%2Fimages%2FLifecycle-Marketing.original.png&w=2048&q=75" />
          <mj-text align="center">
            <h2>Email Design</h2>
            <p>Email design isn’t easy, especially with so many code limitations from mail clients--so let us do the heavy-lifting.</p>
          </mj-text>
        </mj-column>
      </mj-group>
    </mj-section>
  </mj-body>
</mjml>

Dividers

<mj-divider> allows you to create a horizontal line as a divider. It can also be customized, similarly to a divider in HTML. For example, you can control the thickness of the border using the attribute “border-width”; you can control whether the divider is solid, dotted, or dashed with “border-style”; and you can change the color using “border-color”.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-divider border-width="5px" border-style="dotted" border-color="green" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Text

Much like with HTML, inserting text in MJML is simple. Just use <mj-text>. If you want to control the size, use the attribute font-size; to change the color, use the color attribute; to capitalize, uppercase, or lowercase the text, use text-transform.

mj text component rendering example
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="20px" text-transform=“uppercase” text-decoration=“underline”>
          <h1>
            Hey, friend!
          </h1>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Buttons

<mj-button> lets you create and customize buttons in MJML, with the aid of style attributes. For example, you can control the font of your button text, the color of the text, and the color of the button itself.

mj button component rendering example
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-button font-family=“Arial” background-color="#f48847" color="white">
          Call Now!
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Images

Create images in MJML and control their size by using the <mj-image> tag.

mj image component rendering example
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="300px" src="https://images.pexels.com/photos/40815/youth-active-jump-happy-40815.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Spacers

<mj-spacer> lets you control the amount of space between two components, such as text. However, if you want to start another line of text (a line break), you can just use the <br> tag as you would in HTML.

mj spacer component rendering example
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello</mj-text>
        <mj-spacer height="100px" />
        <mj-text>Goodbye</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Tables

Creating tables in MJML is also similar to creating them in HTML. Start with the <mj-table> tag and use <tr>,<th>, and <td> tags to make the columns and rows. You can also style the tables to your liking.

mj table component rendering example
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-table>
          <tr style="border-bottom:2px solid green;text-align:center;padding:15px">
            <th style="padding: 0 15px 0 0;">First Name</th>
            <th style="padding: 0 15px;">Last Name</th>
            <th style="padding: 0 0 0 15px;">Email</th>
          </tr>
          <tr style="text-align:center">
            <td style="padding: 0 15px 0 0;">John</td>
            <td style="padding: 0 15px;">Smith</td>
            <td style="padding: 0 0 0 15px;">jsmith@scalero.io</td>
          </tr>
          <tr style="text-align:center">
            <td style="padding: 0 15px 0 0;">Mary</td>
            <td style="padding: 0 15px;">Parker</td>
            <td style="padding: 0 0 0 15px;">mparker@scalero.io</td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Navigation Bar

Use the <mj-navbar> tag to include a navigation bar in your emails. If your navigation links all stem from the same site, consider using the base-url attribute within the <mj-navbar> tag first for your primary domain name (in our example, it’s scalero.io). Then, when creating the navigation bar links, simply use the URL slugs (the part that comes after the domain name) within the <mj-navbar-link> tags.

mj navbar component rendering example
<mjml>
  <mj-body>
    <mj-section background-color="#172725">
      <mj-column>
        <mj-navbar base-url="https://scalero.io" hamburger="hamburger" ico-color="#ffffff">
          <mj-navbar-link href="/company/contact-us" color="#ffffff">Contact Us</mj-navbar-link>
          <mj-navbar-link href="/services" color="#ffffff">Our Services</mj-navbar-link>
          <mj-navbar-link href="/blog" color="#ffffff">Our Blog</mj-navbar-link>
          <mj-navbar-link href="/company/about-us" color="#ffffff">About Us</mj-navbar-link>
        </mj-navbar>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Social Media Icons

Putting social media icons in your emails is made easy with the <mj-social> tag. You don’t have to fetch an image of the social media icons because MJML does it for you. Just name the platform you want to link to by using the <mj-social-element> tag (for example, linkedin), provide the link to your social media profile page, and you’re good to go. 

mj social component rendering example
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-social font-size="15px" icon-size="30px" mode="horizontal">
          <mj-social-element name="linkedin" href="https://www.linkedin.com/company/scalero">
          </mj-social-element>
          <mj-social-element name="facebook" href="https://www.facebook.com/scalero.io/">
          </mj-social-element>
          <mj-social-element name="twitter" href="https://twitter.com/scalero_io?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">
          </mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Wrappers

MJML wrappers allow you to wrap multiple sections together with <mj-wrapper>. It’s primarily helpful for creating nested layouts that have shared borders or background images across sections.

mj wrapper component rendering example
<mjml>
  <mj-body>
    <mj-wrapper border="1px solid #aaaaaa" padding="50px 30px">
      <mj-section border-top="1px solid #aaaaaa" border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px">
        <mj-column>
          <mj-image padding="0" src="https://images.pexels.com/photos/1181345/pexels-photo-1181345.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />
        </mj-column>
      </mj-section>
      <mj-section border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px" border-bottom="1px solid #aaaaaa">
        <mj-column border="1px solid #dddddd">
          <mj-text padding="20px" font-size="30px"> 5 Tips to grow your business </mj-text>
          <mj-divider border-width="1px" border-color="lightgrey" padding="0 20px" />
          <mj-text padding="20px"> It all starts with an idea...</mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>

Conclusion

As you can see, MJML allows a lot of flexibility and ease-of-use when it comes to coding and design, making it simple for almost anyone to start creating their own emails. But if you’re still looking for some extra guidance, reach out to us! We can answer any questions you have about email design and even code custom emails for you. 

If you like creating emails in Figma and want to turn your designs into MJML or HTML in seconds, Cannoli is the tool for you. All you need is a Figma URL to get started!

Join our mailing list

Get your fix of marketing, design and automation tips, all written by industry experts.

scalero-logo
linkedin-icon
angellist-icon
twitter-icon
theorg-icon

Join our mailing list

Get your fix of marketing, design and automation tips tailor made for email written by industry experts.
Designrush logo
hello@scalero.io+1 650.689.7182San Francisco, CaliforniaMexico City, Mexico