Timeline

This element is suitable for list contents which are related to each other trough time.

Screenshot

HTML

  • .ol-timeline is the wrapper element

  • .tl-item is one of timeline items inside the wrapper

  • <span class="item-section">2015</span> is for the year

Fixed Scrolling Years

This variation consists of sub-sections, it begins with

Items in each section share the same year, sample of one section:

  • The year comes at the end of the .tl-section

  • use with-icon or with-thumb classes based on usage

.with-icon and .with-thumb variations

As you may have noticed there are two variation, one which icons at the side of contents and one with thumbnail image. So if your .pub-item comes with an icon then you should use the .with-icon class and likewise use the with-thumb class on tl-section class.

Last updated