Timeline

A timeline that displays items, with a year and body copy.

Overview

Category: Tabs and lists

Here is a working example of Timeline. Its appearance will change in response to the size of your screen.

2014

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie, metus eu egestas pulvinar, massa sem feugiat eros, vitae tempus quam libero id augue. Integer suscipit egestas magna. Fusce tempus varius dignissim. Duis ultricies nisl quis risus hendrerit, sed tempor dui iaculis. Phasellus blandit ullamcorper magna, ullamcorper porta libero efficitur luctus. Suspendisse a risus leo. Curabitur pharetra diam augue, quis euismod justo porttitor in. Quisque suscipit augue ante, nec rutrum neque ullamcorper et. Cras tempus feugiat lacus, non sagittis risus porta eu. Pellentesque volutpat, diam id fermentum placerat, ante arcu maximus elit, a fermentum ante orci sit amet felis. Aliquam erat volutpat. Integer rutrum congue lectus, vitae vulputate odio. Quisque convallis mi malesuada tortor tempor, eget molestie tortor pretium. Morbi placerat felis eu orci bibendum, id convallis justo condimentum. Ut vitae lorem lorem. Vivamus malesuada, nisl ac egestas tempor, nisl risus suscipit eros, ac aliquet enim leo et augue.

2018

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie, metus eu egestas pulvinar, massa sem feugiat eros, vitae tempus quam libero id augue. Integer suscipit egestas magna. Fusce tempus varius dignissim. Duis ultricies nisl quis risus hendrerit, sed tempor dui iaculis. Phasellus blandit ullamcorper magna, ullamcorper porta libero efficitur luctus. Suspendisse a risus leo. Curabitur pharetra diam augue, quis euismod justo porttitor in. Quisque suscipit augue ante, nec rutrum neque ullamcorper et. Cras tempus feugiat lacus, non sagittis risus porta eu. Pellentesque volutpat, diam id fermentum placerat, ante arcu maximus elit, a fermentum ante orci sit amet felis. Aliquam erat volutpat. Integer rutrum congue lectus, vitae vulputate odio. Quisque convallis mi malesuada tortor tempor, eget molestie tortor pretium. Morbi placerat felis eu orci bibendum, id convallis justo condimentum. Ut vitae lorem lorem. Vivamus malesuada, nisl ac egestas tempor, nisl risus suscipit eros, ac aliquet enim leo et augue.

Usage guidelines

  • Use to show historic events over a period of time.

Placement

  • Place in the Body Content.

Editing and customisation

  • You can edit the title and the body, and add an optional image.

Related components

Side Content Help
Example of "Side help".
Side Content Help
More details
Title
Example of "Title".
Title
More details
Side Content Date Range
Example of "Side date range".
Side Content Date Range
More details
Campaign Info Panel
Example of "Campaign info panel".
Campaign Info Panel
More details
Back to top