newsletter email template

project type
client work
last updated
Feb 28, 2022 06:53 PM
description
build responsive email templates with MJML
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