We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.

Timeline

Display a vertical timeline, in different colors, sizes, and states

Features

  • Different alignments result in different styles
  • Markers can be icons or images
  • Individual color settings for headers and markers

  • Different header sizes
  • Timeline items with individual headlines and text

Example

Today

0.2 Billion Years Ago

Our species, Homo Sapiens, evolves

1.5 Billion Years Ago

Eukaryotes evolved

2.1 Billion Years Ago

Multicellular life evolves

3.8 Billion Years Ago

First life arises

4.6 Billion Years Ago

The origin of Earth

Start

Alignment

Timelines can be left-aligned, centered, or right-aligned. Centered is particularly useful for complex timelines.
Today

0.2 Billion Years Ago

Our species, Homo Sapiens, evolves

1.5 Billion Years Ago

Eukaryotes evolved

2.1 Billion Years Ago

Multicellular life evolves

3.8 Billion Years Ago

First life arises

4.6 Billion Years Ago

The origin of Earth

Start
Today

0.2 Billion Years Ago

Our species, Homo Sapiens, evolves

1.5 Billion Years Ago

Eukaryotes evolved

2.1 Billion Years Ago

Multicellular life evolves

3.8 Billion Years Ago

First life arises

4.6 Billion Years Ago

The origin of Earth

Start

Sizes

Timeline headers are available in three different sizes.
Small
Medium
Large

Icons in Markers

Timeline markers can be (FontAwesome) icons.
Start

A spinner icon

A red flag

End

Images in Markers

Alternatively, timeline markers can contain an image. It should be 32x32px in size. Larger images will be resized automatically.
Start

An image in a marker

Another image

End

Color Settings

You can set the colors of timeline headers and markers.
Primary

Timeline item in color

Success

Timeline item in different color

Custom

Yet another color

Info