foundation-emails/templates/sidebar-hero.html

A framework for responsive emails

<style type="text/css">

.header {
  background: #8a8a8a;
}

.header .columns {
  padding-bottom: 0;
}

.header p {
  color: #fff;
  margin-bottom: 0;
}

.header .wrapper-inner {
  padding: 20px; /*controls the height of the header*/
}

.header .container {
  background: #8a8a8a;
}

.wrapper.secondary {
  background: #f3f3f3;
}

</style>
<!-- move the above styles into your custom stylesheet -->

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

<wrapper class="header" bgcolor="#8a8a8a">
  <container>
    <row class="collapse">
      <columns small="6" valign="middle">
        <img src="http://placehold.it/200x50/663399">
      </columns>
      <columns small="6" valign="middle">
        <p class="text-right">Sidebar Hero</p>
      </columns>
    </row>
  </container>
</wrapper>

<container>

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

  <row>
    <columns>
      <h1>Hi, Elijah Baily</h1>
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
      <center>
        <img src="http://placehold.it/548x300" alt="">
      </center>
      <callout class="primary">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="#">Click it!</a></p>
      </callout>
    </columns>
  </row>
  <row>
    <columns large="7">
      <h3>Hello, Han Fastolfe</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nobis velit, aliquid pariatur at fugit. Omnis at quae, libero iusto quisquam animi blanditiis neque, alias minima corporis, ab in explicabo?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos voluptas minus, cupiditate voluptatem, voluptatum iste molestiae consectetur temporibus quae dolore nam possimus reprehenderit blanditiis laborum iusto sit. Perspiciatis, dolor.</p>
      <callout class="secondary">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quas optio totam quidem, placeat sunt, sit iusto fugit. Harum omnis deleniti enim nihil iure, quis laudantium veniam velit animi debitis. <a href="#">Click It!</a>
      </callout>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus eius amet alias odit accusantium, fugit perspiciatis nulla suscipit nisi. Laborum aliquid, voluptatum consectetur fugiat maxime architecto enim molestias aperiam!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eveniet veritatis, magnam ipsam et vero necessitatibus. Deserunt facilis impedit, adipisci illo laboriosam assumenda fugiat dolorum nam odio aliquid, sit est.</p>
      <button class="expand" href="#">Click Me!</button>
    </columns>
    <columns large="5" class="sidebar">
      <callout class="secondary">
        <h5>Header</h5>
        <p class="lead">Sub-header</p>
        <p><a href="#">Just a Plain Link &raquo;</a></p>
        <p><a href="#">Just a Plain Link &raquo;</a></p>
        <p><a href="#">Just a Plain Link &raquo;</a></p>
        <p><a href="#">Just a Plain Link &raquo;</a></p>
        <p><a href="#">Just a Plain Link &raquo;</a></p>
      </callout>
      <callout class="secondary">
        <h6>CONNECT WITH US:</h6>
        <button class="facebook expand" href="#">Facebook</button>
        <button class="twitter expand" href="#">Twitter</button>
        <button class="google expand" href="#">Google+</button>
        <p>CONTACT INFO:</p>
        <p>Phone: 408-341-0600</p>
        <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
      </callout>
    </columns>
  </row>
  
  <center>
    <menu>
      <item href="#">Terms</item>
      <item href="#">Privacy</item>
      <item href="#">Unsubscribe</item>
    </menu>
  </center>

</container>