Display a series of events over a period of time

Timeline is a nice way of showing a list of events over time in your emails. The pipe image in the middle column is hidden on mobile, and the columns stack. Timeline also makes use of responsive display and spacing utilities.

Preview
Code

<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td style="padding: 0 20px;">
      <div class="spacer py-sm-20" style="line-height: 40px;">‌</div>
      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tr>
          <td class="col pt-sm-0" width="100" style="padding: 30px 10px 0;">
            <span style="font-size: 14px;">2007 - 2008</span>
          </td>
          <td class="col hide-sm" align="center" width="50" style="padding: 0 10px;">
            <img src="https://i.imgur.com/evrIM2o.png" alt="|" width="35">
          </td>
          <td class="col py-sm-10" width="450" style="padding: 30px 10px 0;">
            <h4 style="margin: 0 0 10px;">Massachusetts Institute of Technology</h4>
            <p style="margin: 0;">Co-wrote a book on the Semantic Web and Best Practices for Developers. Awarded the MIT entreprenur of the year.</p>
          </td>
        </tr>
      </table>
      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tr>
          <td class="col pt-sm-20" width="100" style="padding: 30px 10px 0;">
            <span style="font-size: 14px;">2004 - 2006</span>
          </td>
          <td class="col hide-sm" align="center" width="50" style="padding: 0 10px;">
            <img src="https://i.imgur.com/evrIM2o.png" alt="|" width="35">
          </td>
          <td class="col py-sm-10" width="450" style="padding: 30px 10px 0;">
            <h4 style="margin: 0 0 10px;">Parsons School of Design</h4>
            <p style="margin: 0;">Awarded Best Designer of the Year voted by student and teacher body.</p>
          </td>
        </tr>
      </table>
      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tr>
          <td class="col pt-sm-20" width="100" style="padding: 30px 10px 0;">
            <span style="font-size: 14px;">2002 - 2004</span>
          </td>
          <td class="col hide-sm" align="center" width="50" style="padding: 0 10px;">
            <img src="https://i.imgur.com/evrIM2o.png" alt="|" width="35">
          </td>
          <td class="col py-sm-10" width="450" style="padding: 30px 10px 0;">
            <h4 style="margin: 0 0 10px;">Berkley College</h4>
            <p style="margin: 0;">Two year program with a focus on design principles and Javascript development. Won National Student Design Competition for Application Design.</p>
          </td>
        </tr>
      </table>
      <div class="spacer py-sm-20" style="line-height: 40px;">‌</div>
    </td>
  </tr>
</table>

Note

The more text you have in the right Column, the higher the risk of the 'pipe' images not connecting with each other. Since these are inline images, if you need more than ~2 lines of text, you need to adjust the pipe image accordingly.

You can test this on desktop with the example above - we've made it editable.

← Testimonial

Pine Email Framework Documentation

Display a series of events over a period of time