The timeline is created using pure CSS to reduce the page download size for mobile device users. It can hold up to 48 items.
When viewed on computers and tablets in landscape mode, the timeline scrolls horizontal. When the screen width is less than 800px, the timeline switches to a vertical layout.
1990
The item is show with all the options which are …
Date
Heading
Image with alt text
Text description
CTA style link tab
1995
2000
The item is show with all the options which are …
Date
Heading
Image with alt text
Text description
CTA style link tab
2005
2010
2015
The item is show with all the options which are …
Date
Heading
Image with alt text
Text description
CTA style link tab
2015
Each item has a field for the date, a heading and text. Images and links can be added globally.
The images have an alt text attribute and the links can be aligned left, center or right. They can have a relative or absolute file path and open in a new window if required. Click the link below to find out more about opening internal and external pages using relative and absolute file paths.
Width
In horizontal mode, the timeline can be centered with a maximum width setting or, by checking a box, made full width.
Items
The number of items to show can be set for wide screen, normal and tablet in landscape mode. If viewing this page on a computer, reduce the browser width to see the changes in the number of items and then the change in orientation.
Styles
The timeline can have its color changed and the markers inherit the container background color.
The date can be adjusted for font size and color.
The items can have a border as shown above or the background set to a different color from the conatiner background.
