foundation-emails
Version:
A framework for responsive emails
110 lines (104 loc) • 3.84 kB
HTML
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<th class="columns first">
Thing 1
</th>
<th class="columns">
Thing 2
</th>
<th class="columns last">
Thing 3
</th>
</tr>
</table>
<table class="row collapse">
<tr>
<th class="small-12 large-12 columns first last">
<p>This is a collapse column sit amet, consectetur adipisicing elit. Totam aliquid tenetur dignissimos repellendus sapiente reprehenderit vero, possimus omnis necessitatibus ad, debitis, distinctio ea laudantium. Corrupti veniam harum sint, laboriosam aut.</p>
</th>
</tr>
</table>
<table class="row">
<tr>
<th class="small-12 large-6 columns first">
<p>One Word</p>
</th>
<th class="small-12 large-6 columns last">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam impedit odit cum, nemo qui corporis similique placeat aut inventore voluptas debitis ratione deleniti sequi, cumque eos animi perspiciatis sunt.</p>
</th>
</tr>
</table>
<table class="row">
<tr>
<th class="small-12 large-2 columns first">
<table>
<tr>
<th>
<p>One word</p>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero enim eos ullam pariatur doloremque voluptatibus, modi repellat porro beatae provident dicta quidem rerum dolor nesciunt magnam ipsum illo cupiditate iusto.</p>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-6 columns last">
<table>
<tr>
<th>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est amet ut placeat vel hic corporis impedit delectus suscipit voluptatibus itaque, obcaecati sapiente sint cupiditate magni fugit ducimus error quae molestiae.</p>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</table>
<table class="row">
<tr>
<th class="small-12 large-2 columns first">
<table>
<tr>
<th>
<p>One word</p>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-4 large-4 columns">
<table>
<tr>
<th>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet rerum, cumque. Esse dolorem voluptatibus deserunt facere earum explicabo ducimus minus incidunt sunt aliquam animi fugiat, alias debitis quas molestiae quaerat.</p>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-8 large-6 columns last">
<table>
<tr>
<th>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea commodi quis quae iusto, blanditiis amet repudiandae ipsam, saepe, minus nulla repellat consectetur impedit. Sequi ratione iste doloribus, ab dignissimos quibusdam.</p>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>