foundation-emails/test/visual/pages/button-expanded-inky.html

A framework for responsive emails

<container>
  <p>Text should be centered</p>
  <p>hover on buttons should change pointer full width of button</p>
  <p>on small, should work the same</p>
  <row>
    <columns small="12" large="6">
      <button href="#" class="expanded">button</button>
    </columns>
    <columns small="12" large="6">
      <button href="#" class="expanded">example text 2</button>
    </columns>
  </row>

  <row>
    <columns small="6" large="6">
      <button href="#" class="expanded">button</button>
    </columns>
    <columns small="6" large="6">
      <button href="#" class="expanded">example text 2</button>
    </columns>
  </row>

  <row>
    <columns small="12" large="3">
      <button href="#" class="expanded">button</button>
    </columns>
    <columns small="12" large="9">
      <button href="#" class="expanded">example text 2</button>
    </columns>
  </row>

  <row>
    <columns small="12" large="4">
      <button href="#" class="expanded">button</button>
    </columns>
    <columns small="12" large="8">
      <button href="#" class="expanded">example text 2</button>
    </columns>
  </row>

  <row>
    <columns small="4" large="4">
      <button href="#" class="small expanded">button</button>
    </columns>
    <columns small="6" large="8">
      <button href="#" class="small expanded">example text 2</button>
    </columns>
  </row>

  <callout class="secondary">
    <row>
      <columns large="6">
        <h5>Connect With Us:</h5>
        <button class="facebook expanded" href="http://get.foundation">Facebook</button>
        <button class="twitter expanded" href="http://get.foundation">Twitter</button>
        <button class="google expanded" href="http://get.foundation">Google+</button>
      </columns>
      <columns large="6">
        <h5>Contact Info:</h5>
        <p>Phone: 408-341-0600</p>
        <p>Email: <a href="mailto:foundation@get.foundation">foundation@get.foundation</a></p>
      </columns>
    </row>
  </callout>
  <em>Make sure the above container is not greater than 600px or looks awkwardly too wide.</em>
</container>