email templates with MJML

project type
client work
last updated
Dec 22, 2021 09:21 PM
description
build responsive email templates with MJML
notion image
 
mjml is a lightweight code editor for creating responsive email templates. it’s a neat idea that helps people with a bit of coding knowledge create stunning templates. feel free to use these and modify them!

Arctic Linen

modern newsletter template
 
notion image
 

Code

 
<mjml>
  <mj-head>
    <mj-preview>This is Arctic Linen | Tiny Marketing Co. </mj-preview>
    <mj-font name="Cousine" href="https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&display=swap" />
    <mj-attributes>
      <mj-text align="center" font-family="Cousine, Helvetica" color="#2C2C34" />
    </mj-attributes>
    <mj-style inline="inline"> 
      .link-browser { color:#777777; font-size:10px; text-decoration:none; text-transform:uppercase; } 
      .uppercase-title { color:#EF7674; font-size:22px; text-transform:uppercase; } 
      .lowercase-title { color:#EF7674; font-size:20px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; background:linear-gradient(to top, #FAF6F0 30%, transparent 30%) !important; } 
      .h1 { font-size:26px; line-height: 1.3; } 
      .h2 { font-size:18px; } 
      .h3 { font-size:16px; font-weight: 500; } 
      .link { color:#EF7674; font-weight:400; text-transform:uppercase; text-decoration:none; } 
      .link-lowercase { font-size:14px; color:#EF7674 !important; line-height:1.5; font-weight:400; text-decoration:none !important; } 
      .paragraph { font-size:14px; font-weight:300; line-height:1.5; } 
      .reverse-paragraph { font-size:12px; font-weight:300; line-height:1.5; color:#ffffff; } 
      .reverse-paragraph-large { font-size:15px; font-weight:400; line-height:1.5; font-style:italic; color:#ffffff; } 
      .footer-fine-print { color:#ffffff; font-size:10px; font-weight:400; } </mj-style>
    <mj-style> 
      .gradient { background: linear-gradient(to top, #F5EDE0 50%, transparent 50%) !important; } </mj-style>
  </mj-head>
  <mj-body background-color="#DEDEE3">
    <!-- Top Banner -->
    <mj-section padding-top="0px" padding-bottom="0px">
      <mj-column>
        <mj-text align="left"><a href="{$url}" class="link-browser">View this in your browser</a></mj-text>
      </mj-column>
    </mj-section>
    <!-- Company Logo -->
    <mj-section padding-bottom="30px">
      <mj-column>
        <mj-image width="100px" alt="Courtesy of the Noun Project" src="https://tinymarketing.b-cdn.net/noun_Circle_2717448.png" />
      </mj-column>
    </mj-section>
    <!-- Intro Section -->
    <mj-section background-color="#ffffff">
      <mj-column>
        <mj-text align="left">
          <p class="paragraph">Hello again, {% if customer.name != blank %}{{ customer.name | split: " " | first | titlecase}}{% else %}there{% endif %}!</p>
          <p class="paragraph">Welcome to the new mailing list for Tiny Marketing! Here you'll find indie SaaS products, tips for digital marketing, special offers, and code snippets to use on your projects. Enjoy!</p>
          <p class="paragraph">Until next time, </br> <em>Kristin @ Tiny Marketing</em></p>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
      </mj-column>
    </mj-section>
    <!-- Two columns -->
    <mj-section padding-top="40px">
      <mj-column>
        <mj-text> <img src="https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff77b64fe-804b-450c-a4d8-b22deaa7dc26%2F5779071_Mesa_de_trabajo_1_copia.png?table=block&id=65027f14-b936-4074-8c13-d3099e95392e&cache=v2" width="100%" alt="Background vector created by freepik - www.freepik.com" /> </mj-text>
      </mj-column>
      <mj-column>
        <mj-text align="right">
          <p class="lowercase-title">Better Analytics</p>
        </mj-text>
        <mj-divider border-width="2px" border-style="solid" border-color="#EF7674" width="80%" align="left" padding-top="0" />
        <mj-text align="right">
          <ul class="paragraph" align="right">
            <li>Say stuff about project </li>
            <li>Really make it come to life with wonderful descriptions</li>
          </ul>
        </mj-text>
        <mj-button href="https://tinymarketing.co/" background-color="#FAF6F0" border="2px solid #EF7674" border-radius="0px" padding="10px 20px 10px" inner-padding="5px 40px 5px 40px" align="right" color="#000000" text-transform="uppercase" font-family="Cousine, Helvetica" font-weight="500">View More</mj-button>
      </mj-column>
    </mj-section>
    <!-- Two columns -->
    <mj-section padding-top="30px">
      <mj-column>
        <mj-text align="left">
          <p class="lowercase-title"> Simple Forms</p>
        </mj-text>
        <mj-divider border-width="2px" border-style="solid" border-color="#EF7674" width="80%" align="right" padding-top="0" />
        <mj-text align="left">
          <ul class="paragraph">
            <li>Here's a bullet point</li>
            <li>And another one</li>
            <li>Last bullet point to really bring the details to life for your reader!</li>
        </mj-text>
        <mj-button href="https://tinymarketing.co/" background-color="#FAF6F0" border="2px solid #EF7674" border-radius="0px" padding="10px 20px 10px" inner-padding="5px 40px 5px 40px" align="left" color="#000000" text-transform="uppercase" font-family="Cousine, Helvetica" font-weight="500">View More</mj-button>
      </mj-column>
      <mj-column>
        <mj-text> <img src="https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff77b64fe-804b-450c-a4d8-b22deaa7dc26%2F5779071_Mesa_de_trabajo_1_copia.png?table=block&id=65027f14-b936-4074-8c13-d3099e95392e&cache=v2" width="100%" alt="Background vector created by freepik - www.freepik.com" /> </mj-text>
        <mj-spacer height="120px" />
      </mj-column>
    </mj-section>
    <!-- Three Icons CTA -->
    <mj-section padding-top="20px" padding-bottom="0" background-color="#FAF6F0">
      <mj-column>
        <mj-text>
          <p class="uppercase-title">Here's some of the benefits</p>
        </mj-text>
        <mj-text>
          <p class="paragraph">Get started with Tiny Marketing today! Here's where you can talk about what's great, explain the benefits, and really convince people to join! Plus look at these sweet icons. </p>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding-top="0px" padding-bottom="0" background-color="#FAF6F0">
      <mj-column>
        <mj-image width="75px" alt="money icon" src="https://image.flaticon.com/icons/png/512/4392/4392929.png" />
        <mj-text>
          <p class="h3">Get - and stay - organized</p>
        </mj-text>
      </mj-column>
      <mj-column>
        <mj-image width="75px" alt="person icon" src="https://image.flaticon.com/icons/png/128/4392/4392930.png" />
        <mj-text>
          <p class="h3">Global services, 24/7</p>
        </mj-text>
      </mj-column>
      <mj-column>
        <mj-image width="75px" alt="checkbox icon" src="https://image.flaticon.com/icons/png/512/4392/4392925.png" />
        <mj-text>
          <p class="h3">Easy email communication</p>
        </mj-text>
      </mj-column>
      </mj-group>
    </mj-section>
    <mj-section padding-top="0px" background-color="#FAF6F0">
      <mj-column>
        <mj-button href="https://tinymarketing.co/" background-color="#EF7674" border-radius="0px" padding="10px 0px 20px 0px" inner-padding="10px 45px 10px 45px" text-transform="uppercase" font-size="15px" font-family="Cousine, Helvetica">Let's Go Do Stuff</mj-button>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
      </mj-column>
    </mj-section>
    <!-- Gradient Section 1 -->
    <mj-section css-class="gradient" padding-bottom="0px">
      <mj-column>
        <mj-image src="https://images.unsplash.com/photo-1512626120412-faf41adb4874?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8ZW1haWx8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" href="https://tinymarketing.co/"></mj-image>
      </mj-column>
    </mj-section>
    <!-- Gradient Section 2 -->
    <mj-section background-color="#F5EDE0" padding-bottom="0">
      <mj-column>
        <mj-text align="left">
          <p class="uppercase-title">Latest Projects // Check it Out</p>
        </mj-text>
      </mj-column>
    </mj-section>
    <!-- Gradient Section 3-->
    <mj-section background-color="#F5EDE0" padding-top="0" padding-bottom="50px">
      <mj-column>
        <mj-image width="200px" src="https://images.unsplash.com/photo-1594498257673-9f36b767286c?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8ZWJvb2t8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" align="left" />
        <mj-text align="left" font-weight="600">Calibre Ebook</mj-text>
        <mj-divider border-width="1px" border-style="solid" border-color="#EF7674" width="50%" padding-top="0px" align="left" />
        <mj-text align="left">Learn how to make a beautiful ebook.</mj-text>
        <mj-button href="https://tinymarketing.co/" background-color="#FAF6F0" border="2px solid #EF7674" border-radius="0px" padding="10px 20px 10px" inner-padding="5px 40px 5px 40px" align="left" color="#000000" text-transform="uppercase" font-family="Cousine, Helvetica" font-weight="500">Let's Go!</mj-button>
      </mj-column>
      <mj-column>
        <mj-image width="200px" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="label services" align="left" />
        <mj-text align="left" font-weight="600">Notion Website</mj-text>
        <mj-divider border-width="1px" border-style="solid" border-color="#EF7674" width="50%" padding-top="0px" align="left" />
        <mj-text align="left">Code a website in Notion. </mj-text>
        <mj-button href="https://tinymarketing.co/" background-color="#FAF6F0" border="2px solid #EF7674" border-radius="0px" padding="10px 20px 10px" inner-padding="5px 40px 5px 40px" align="left" color="#000000" text-transform="uppercase" font-family="Cousine, Helvetica" font-weight="500">Let's Go!</mj-button>
      </mj-column>
      <mj-column>
        <mj-image width="200px" src="https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1350&q=80" alt="bag services" align="left" />
        <mj-text align="left" font-weight="700">MJML Template</mj-text>
        <mj-divider border-width="1px" border-style="solid" border-color="#EF7674" width="50%" padding-top="0px" align="left" />
        <mj-text align="left">Steal this email template.</mj-text>
        <mj-button href="https://tinymarketing.co/" background-color="#FAF6F0" border="2px solid #EF7674" border-radius="0px" padding="10px 20px 10px" inner-padding="5px 40px 5px 40px" align="left" color="#000000" text-transform="uppercase" font-family="Cousine, Helvetica" font-weight="500">Let's Go!</mj-button>
      </mj-column>
    </mj-section>
    <!-- footer -->
    <mj-section background-color="#2C2C34" padding-top="15px">
      <mj-column>
        <mj-image src="https://tinymarketing.b-cdn.net/noun_Circle_2717448.png" width="50px" alt="logo"></mj-image>
        <mj-text>
          <p class="reverse-paragraph">hire @ tinymarketing.co </p>
          <p class="reverse-paragraph">(605) 610 - 1940 </p>
        </mj-text>
        <mj-social font-size="11px" icon-size="20px" mode="horizontal" text-padding="5px" padding="0px 25px">
          <mj-social-element src=https://bucket.mlcdn.com/a/3304/3304891/images/539434e7a4955f03fb88a30fb745c1fd4c5fb956.png href="https://www.linkedin.com/" alt="linkedin icon">
          </mj-social-element>
          <mj-social-element src=https://bucket.mlcdn.com/a/3304/3304891/images/87f30d3d0a4668afac272ea8f9294c3f925b5ee9.png href="https://www.instagram.com/" alt="instagram icon">
          </mj-social-element>
        </mj-social>
        <mj-text>
          <p class="footer-fine-print">You received this email because you signed up for our newsletter.</p>
          <p class="footer-fine-print"><a href="{$unsubscribe}" style="color: #E0FF4F; text-transform: uppercase;">Unsubscribe</a></p>
        </mj-text>
        <mj-text>
          <p class="footer-fine-print">Sioux Falls SD<br /> 57106 United States</p>
        </mj-text>
        <mj-text>
          <p class="footer-fine-print">Copyright &copy; 2021 Tiny Marketing LLC. All rights reserved. </p>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
 
Modify it in the MJML email editor: https://mjml.io/try-it-live
 
 

Mac and Cheeze

modern e-commerce template
 
notion image
 
<mjml>
  <mj-head>
    <mj-preview>This is Mac and Cheeze | Tiny Marketing Co.</mj-preview>
    <mj-font name="Courier Prime, Cormorant Garamond" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Courier+Prime&display=swap" />
    <mj-attributes>
      <mj-text align="center" font-family="Courier Prime, Cormorant Garamond, Helvetica" font-size="15px" />
    </mj-attributes>
    <mj-style inline="inline"> 
      .uppercase-title { color:#272727; font-size:18px; text-transform:uppercase; } 
      .lowercase-title { color:#272727; font-size:40px; font-family:Cormorant Garamond;} 
      .reverse-lowercase-title { color:#ffffff; font-size:40px; font-family:Cormorant Garamond;} 
      .link { color:#FFBE86; text-transform:uppercase; text-decoration:none; font-size:13px;} 
      .paragraph { font-size:14px; font-weight:300; line-height:1.5;} 
      .reverse-paragraph { font-size:12px; font-weight:300; line-height:1.5; color:#272727; } .carousel-image { width:100%; } 
      .new-products-sub { font-size:34px; line-height:1.2; color:#ffffff; text-align:left; font-family:Courier Prime, Helvetica;} 
      .new-products { font-size:44px; font-weight:300; line-height:1.2; color:#ffffff; text-align:left; font-family:Cormorant Garamond, Helvetica; font-style:italic;} 
      .footer-fine-print { color:#272727; font-size:10px;} 
      .fine-print { color:#ffffff; font-size:9px;} 
      .coupon-code { font-size:24px; font-weight:600; line-height:1.2; color:#FFBE86; text-transform:uppercase; font-family:Courier Prime, Helvetica;} </mj-style>
  </mj-head>
  <mj-body background-color="#fff">
    <!-- Logo -->
    <mj-section background-color="#272727" padding-top="40px" padding-bottom="10px">
      <mj-column>
        <mj-image src="https://tinymarketing.b-cdn.net/noun_Circle_2717448(1).png" width="90px" alt="tinymarketing logo" align="left"></mj-image>
      </mj-column>
      <!-- Top Banner -->
    </mj-section>
    <mj-section background-color="#272727" padding-top="0px" padding-bottom="50px">
      <mj-column>
        <mj-text>
          <p class="new-products">New Products: </p>
          <p class="new-products-sub">Sustainable T-Shirts</p>
        </mj-text>
      </mj-column>
    </mj-section>
    <!-- Hero -->
    <mj-hero mode="fluid-height" background-width="600px" background-height="500px" background-url="https://images.unsplash.com/photo-1564584217132-2271feaeb3c5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" background-color="#222222" background-position="bottom left" padding="100px 0px">
    </mj-hero>
    <!-- Group -->
    <mj-section padding-top="0px" padding-bottom="0px">
      <mj-group>
        <mj-column>
          <mj-image padding="20px 10px 0px 0px" src="https://images.unsplash.com/photo-1603320410149-db26b12d5c2b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
        </mj-column>
        <mj-column>
          <mj-image padding="20px 0px 10px 10px" src="https://images.unsplash.com/photo-1503341504253-dff4815485f1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" />
        </mj-column>
      </mj-group>
    </mj-section>
    <!-- Product Section -->
    <mj-section padding-top="40px">
      <mj-column>
        <mj-text>
          <p class="lowercase-title">Los Angeles Training Club — 705.</p>
        </mj-text>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding-top="0px" padding-bottom="0">
      <mj-column>
        <mj-text> <img src="https://images.unsplash.com/photo-1618354691373-d851c5c3a990?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8dCUyMHNoaXJ0fGVufDB8fDB8d2hpdGV8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" width="100%" alt="training club t shirt" /> </mj-text>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-divider border-width="1px" border-style="solid" border-color="#272727" width="100%" padding-top="5px" padding-bottom="5px" />
        <mj-text align="left"> Organic + sustainable cotton</mj-text>
        <mj-divider border-width="1px" border-style="solid" border-color="#272727" width="100%" padding-top="5px" padding-bottom="5px" />
        <mj-text align="left"> Available in short and long sleeve </mj-text>
        <mj-divider border-width="1px" border-style="solid" border-color="#272727" width="100%" padding-top="5px" padding-bottom="5px" />
        <mj-text align="left">For people sizes XS - XL</mj-text>
        <mj-divider border-width="1px" border-style="solid" border-color="#272727" width="100%" padding-top="5px" padding-bottom="5px" />
      </mj-column>
    </mj-section>
    <mj-section padding-top="0px" padding-bottom="0">
      <mj-group>
        <mj-column width="25%">
          <mj-image src="https://images.unsplash.com/photo-1618354691551-44de113f0164?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8dCUyMHNoaXJ0fGVufDB8fDB8d2hpdGV8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
        </mj-column>
        <mj-column width="25%">
          <mj-image src="https://images.unsplash.com/photo-1618354691438-25bc04584c23?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dCUyMHNoaXJ0fGVufDB8fDB8d2hpdGV8&auto=format&fit=crop&w=500&q=60" />
        </mj-column>
        <mj-column width="25%">
          <mj-image src="https://images.unsplash.com/photo-1618354691309-b22b0de007eb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=658&q=80" />
        </mj-column>
      </mj-group>
    </mj-section>
    <!-- Button -->
    <mj-section padding-bottom="50px">
      <mj-column>
        <mj-button href="https://tinymarketing.co/" background-color="#ffffff" border-radius="0px" padding="10px 0px 20px 0px" inner-padding="20px 50px 20px 50px" text-transform="uppercase" font-size="18px" border="1px solid" color="#272727" font-family="Courier Prime, Helvetica">shop now</mj-button>
      </mj-column>
    </mj-section>
    <!-- Coupon Code -->
    <mj-section background-color="#272727">
      <mj-column>
        <mj-text>
          <p class="reverse-lowercase-title">10% off your order</p>
          <p class="coupon-code">code: GETMY10 </p>
        </mj-text>
        <mj-text>
          <p class="fine-print"> Get 10% off all regular-price products. Some Restrictions may apply. </p>
        </mj-text>
      </mj-column>
    </mj-section>
    <!-- Footer -->
    <mj-section padding-top="50px">
      <mj-column>
        <mj-image src="https://tinymarketing.b-cdn.net/noun_Circle_2717448(1).png" width="50px" alt="logo"></mj-image>
        <mj-text>
          <p class="reverse-paragraph">hire @ tinymarketing.co </p>
          <p class="reverse-paragraph">(605) 610 - 1940 </p>
        </mj-text>
        <mj-social font-size="11px" icon-size="20px" mode="horizontal" text-padding="5px" padding="0px 25px">
          <mj-social-element src=https://image.flaticon.com/icons/png/512/733/733635.png href="https://www.twitter.com/" alt="twitter icon">
          </mj-social-element>
          <mj-social-element src=https://image.flaticon.com/icons/png/512/733/733614.png href="https://www.instagram.com/" alt="instagram icon">
          </mj-social-element>
        </mj-social>
        <mj-text>
          <p class="footer-fine-print">You received this email because you signed up for our newsletter.</p>
          <p class="link"><a href="{$unsubscribe}" style="color: #FFBE86;">Unsubscribe</a></p>
        </mj-text>
        <mj-text>
          <p class="footer-fine-print">Sioux Falls SD<br /> 57106 United States</p>
        </mj-text>
        <mj-text>
          <p class="footer-fine-print">Copyright &copy; 2021 Tiny Marketing LLC. All rights reserved. </p>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
 
Modify it in the MJML email editor: https://mjml.io/try-it-live