MJML Responsive Newsletter Tutorial

MJML-Tutorial.mjml

<mjml>
  <mj-head>
    <mj-font name="Merriweather" href="https://fonts.googleapis.com/css?family=Merriweather:400,700" />
    <mj-attributes>
      <mj-all font-family="Merriweather, sans-serif" />
      <mj-text color="#222" />
      <mj-class name="white" color="#fdfdfd" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-container>
      
      <mj-section background-color="#222" padding="0">
        <mj-column>
          <mj-text align="left" color="#fff">
            Newsletter about classical music.
          </mj-text>
        </mj-column>
        
        <mj-column>
          <mj-text align="right" color="#fff">
            <a href="URL" style="color: #fff;">Read in browser</a>
          </mj-text>
        </mj-column>
      </mj-section>
      
      <mj-section>
        <mj-column>
          <mj-spacer />
          
          <mj-image src="https://anselmurban.de/wp-content/uploads/2016/07/music-news-logo.png" width="256" href="URL" />
          
          <mj-text align="center" font-size="16px" color="#999">
            For the avid listener.
          </mj-text>
          
          <mj-divider border-width="1px" border-style="solid" border-color="#eee" padding="10px 65px" />
          
          <mj-text align="center" font-size="18px" text-transform="uppercase" font-weight="700" color="#999">
            <span style="letter-spacing: 4px; word-spacing: 4px;">Friday, July 8 2016</span>
          </mj-text>
        </mj-column>
      </mj-section>
      
      <mj-section>
        <mj-column>
          <mj-text font-size="16px">
            Lorem News
          </mj-text>
          <mj-text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hic ambiguo ludimur. Ergo ita: non posse honeste vivi, nisi honeste vivatur? Intellegi quidem, ut propter aliam quampiam rem, verbi gratia propter voluptatem, nos amemus; Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Facillimum id quidem est, inquam. Quo plebiscito decreta a senatu est consuli quaestio Cn.
          </mj-text>
          <mj-button background-color="#0033cc" color="white" font-weight="bold" border-radius="6px" href="URL">
            Click me!
          </mj-button>
        </mj-column>
      </mj-section>
      
      <mj-section>
        <mj-column>
          <mj-text align="center" padding-bottom="0" font-weight="700">
            <span style="letter-spacing: 1px">
              SHARE THIS NEWSLETTER
            </span>
          </mj-text>
          <mj-social
            display="mail link twitter:url facebook:url"
            base-url="[path-to-icons]"
            icon-size="32"
            text-mode="false"
            mail-href="*|FORWARD|*"
            mail-icon-color="#0033cc"
            mail-icon="[path-to-icons]/mail.png"
            link-href="*|ARCHIVE|*"
            link-icon-color="#222"
            link-icon="[path-to-icons]/link.png"
            twitter-href="*|SHARELINK:twitter|*"
            facebook-href="*|SHARELINK:facebook|*" />
        </mj-column>
      </mj-section>
      
      <mj-section background-color="#222" padding-bottom="0">
        <mj-column width="65%">
          <mj-text mj-class="white">
            You are receiving this email because you opted in at <a href="URL" style="color: #fdfdfd; font-weight: 700;">example.com</a>
          </mj-text>
        </mj-column>
        
        <mj-column width="35%">
          <mj-text mj-class="white" align="right" font-weight="700">
            <a href="URL" style="color: #fdfdfd;">Twitter</a> • <a href="URL" style="color: #fdfdfd;">Facebook</a><br>
            <a href="URL" style="color: #fdfdfd;">Advertise</a> • <a href="URL" style="color: #fdfdfd;">Archive</a>
          </mj-text>
        </mj-column>
      </mj-section>
      
      <mj-section background-color="#222" padding-top="0">
        <mj-column>
          <mj-text mj-class="white" align="center" text-transform="uppercase" font-weight="700">
            <a href="*|UPDATE_PROFILE|*" style="color: #fdfdfd; text-decoration: none; letter-spacing: 1px">settings</a> • <a href="*|UNSUB|*" style="color: #fdfdfd; text-decoration: none; letter-spacing: 1px">unsubscribe</a>
          </mj-text>
        </mj-column>
      </mj-section>
      
    </mj-container>
  </mj-body>
</mjml>