foundation-emails/test/visual/pages/visibility.html

A framework for responsive emails

<container>

  <row>
    <columns small="12" large="12">
      <h4 class="text-center">furry friends</h4>
    </columns>
  </row>

  <row>
    <columns small="6" large="4">
      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
      <p class="text-center">name</p>
      <p class="text-center">age</p>
    </columns>
    <columns small="6" large="4">
      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
      <p class="text-center">name</p>
      <p class="text-center">age</p>
    </columns>
    <columns small="6" large="4" class="show-for-large">
      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
      <p class="text-center">show large</p>
      <p class="text-center">age</p>
    </columns>
  </row>

  <row>
    <columns small="6" large="4">
      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
      <p class="text-center">name</p>
      <p class="text-center">age</p>
    </columns>
    <columns small="6" large="4">
      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
      <p class="text-center">name</p>
      <p class="text-center">age</p>
    </columns>
    <columns small="6" large="4" class="show-for-large">
      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
      <p class="text-center">show large</p>
      <p class="text-center">age</p>
    </columns>
  </row>

  <row>
    <columns small="6" large="4">
      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
      <p class="text-center">name</p>
      <p class="text-center">age</p>
    </columns>
    <columns small="6" large="4">
      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
      <p class="text-center">name</p>
      <p class="text-center">age</p>
    </columns>
    <columns small="6" large="4" class="show-for-large">
      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
      <p class="text-center">show large</p>
      <p class="text-center">age</p>
    </columns>
  </row>

  <row class="hide-for-large">
    <columns small="6" large="6">
      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
      <p class="text-center">show small</p>
      <p class="text-center">age</p>
    </columns>
    <columns small="6" large="6">
      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
      <p class="text-center">show small</p>
      <p class="text-center">age</p>
    </columns>
  </row>

  <row>
    <columns small="12" large="12">
      <callout class="primary">
        <h1>Show on all</h1>
        <p>Calling all cars</p>
        <p>Calling all cars</p>
        <p>Calling all cars</p>
      </callout>
    </columns>
  </row>

  <row>
    <columns small="12" large="12">
      <callout class="primary hide-for-large">
        <h1>Hide for Large</h1>
        <p>Calling all cars</p>
        <p>Calling all cars</p>
        <p>Calling all cars</p>
      </callout>
    </columns>
  </row>

  <row>
    <columns small="12" large="12">
      <callout class="primary show-for-large">
        <h1>Show for Large</h1>
        <p>Calling all cars</p>
        <p>Calling all cars</p>
        <p>Calling all cars</p>
      </callout>
    </columns>
  </row>

  <callout class="hide-for-large primary">
    <p>This callout will only appear on small screens.</p>
  </callout>

  <callout class="show-for-large alert">
    <p>This callout will only appear on large screens.</p>
  </callout>


  <row class="callout">
    <columns small="6" large="4">
      <p class="hide-for-large">Show for small</p>
      <p class="show-for-large">Show for large</p>
    </columns>
    <columns small="6" large="4">
      <button class="hide-for-large" href="">show small</button>
      <button class="show-for-large" href="">show large</button>
    </columns>
  </row>

</container>