foundation-emails/templates/marketing.html

A framework for responsive emails

<style type="text/css">
  body,
  html, 
  .body {
    background: #f3f3f3 !important;
  }
</style>
<!-- move the above styles into your custom stylesheet -->


<spacer size="16"></spacer>

<container>
  <row>
    <columns large="4">
      <center>
        <img src="http://placehold.it/125x200">
      </center>
    </columns>
    <columns large="8">
      <h1>Do Something Radical With This App.</h1>
      <button class="large" href="#">Sign Up</button>
    </columns>
  </row>

  <spacer size="16"></spacer>

  <row>
    <columns>
      <h3 class="text-center">It's Never Been Easier to Do Things.</h3>
      <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur pariatur unde magni repudiandae totam, accusamus facere eligendi. Ad nobis eius porro saepe et ab, aliquid, sed mollitia cumque suscipit aperiam.</p>
    </columns>
  </row>
  <row>
    <columns large="4">
      <center>
        <img src="http://placehold.it/50x50">
      </center>
      <h5 class="text-center">Feature One</h5>
      <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
    </columns>
    <columns large="4">
      <center>
        <img src="http://placehold.it/50x50">
      </center>
      <h5 class="text-center">Feature Two</h5>
      <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
    </columns>
    <columns large="4">
      <center>
        <img src="http://placehold.it/50x50">
      </center>
      <h5 class="text-center">Feature Three</h5>
      <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
    </columns>
  </row>

  <spacer size="16"></spacer>

  <row>
    <columns>
      <h3 class="text-center">What Are You Waiting For? Get Started Today.</h3>
      
      <spacer size="16"></spacer>

      <button class="large expand" href="#">Sign Up</button>
    </columns>
  </row>

  <row class="collapsed footer">
    <columns>
      <spacer size="16"></spacer>
      <p class="text-center">@copywrite nobody<br/>
      <a href="#">hello@nocopywrite.com</a> | <a href="#">Manage Email Notifications</a> | <a href="#">Unsubscribe</a></p>
      <center>
        <menu>
          <item><img src="http://placehold.it/25" alt=""></item>
          <item><img src="http://placehold.it/25" alt=""></item>
          <item><img src="http://placehold.it/25" alt=""></item>
          <item><img src="http://placehold.it/25" alt=""></item>
          <item><img src="http://placehold.it/25" alt=""></item>
        </menu>
      </center>
    </columns>
  </row>

  <spacer size="16"></spacer>

</container>