Timeline Sections

Timeline Sections

Display a series of events over a period of time.
Our templates currently include one type of timeline section.

It's a 3-column layout that shows dates, a visual separator that connects the rows, and the actual content on the right.
On mobile, the image is hidden and the columns stack.

Example

Timeline

Customisation

You can easily change the looks by changing spacing, text, and images.

  • Text styles can be changed with inline CSS
  • Image — simply change the src image path, adjust dimensions and make sure its width does not exceed the width of the parent table cell. Also, the more content you have in the right column, the more higher your image will need to be, so that it doesn't appear to 'break' when it connects to the next one.
  • Top/bottom inner spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the spacer <td> at the near top and near bottom of the section