Timeline Components

Timeline components are designed to display information that unfolds over a chronological period.

  • Timeline components should present 3-5 points. 
  • Timeline points have strict character limits in order to maintain visual integrity
    • Pin text: 5 characters
    • Heading text: 17 characters
    • Description text: 134 characters
  • There are three styles of timeline components (all are shown below). 
  • Pin bubbles can contain images, icons or text.
  • Pins and bars can be medium blue, dark blue, dark teal or dark gray.
  • Gradient style timelines can also be purple.

Component anatomy and styles

These numbered elements make up a Data Item. A maximum of 5 data items is recommended.

  1. Pin text
    1. only Pin Text media can be used, not both
    2. recommended character limit of 5 but fewer characters may sometimes be required in order to fit
  2. Heading
    1. bold, italic and superscript allowed
    2. recommended max of 15 characters
  3. Description
    1.  bold, italic, superscript and lists allowed
    2. recommended max of 124 characters
  4. Link
    1. default, file or video link type permitted
    2. recommended that link text is shorter than the text content
  5. Media
    1. jpg or png can be used to display an image that fills the size of the pin
    2. svg can be used to display an icon in the center of the pin

Selecting a Theme provides different color options.

  • Alternating theme: medium blue, dark blue, dark teal, dark gray
  • General theme:  medium blue, dark blue, dark teal, dark gray
  • Gradient theme: dark blue, dark gray, medium purple

Standard Timeline Component

2020

Lorem ipsum

Maecenas vestibulum mollis

Link here

2021

Cras id dui

In hac habitasse platea dictumst.

Link here

2022

Phasellus ulla

Morbi nec metus. Aenean commodo.

Link here
business-climb-top-1
Nullam accumsan lorem

Nullam tincidunt adipiscing enim. Nullam sagittis. Fusce neque.

Link here
business-climb-top-1
Nunc interdum

Aenean commodo ligula eget dolor. Suspendisse faucibus, nunc et pellentesque egestas.

Link here
business-climb-top-1
Etiam vitae tortor

Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris suspendisse.

Link here
business-climb-top-1
Aliquam lorem ante

Aenean massa. Donec vitae orci sed dolor rutrum auctor.

Link here

Alternate Style Timeline

Pins alternate from bottom and top of timeline bar.

Lorem

Pin heading

Praesent congue erat at massa. Praesent nonummy mi in odio. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo.

Donec

Praesent ac sem eget

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Phasellus nec sem in justo pellentesque facilisis.

Ipsum

Nam commodo susci

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 

Lorem

Suspendisse eu ligula

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus euismod mauris.

Turpis

Donec vitae sapien

Aenean viverra rhoncus pede. Proin faucibus arcu quis ante. Ut tincidunt tincidunt erat.

Pt 6

In sed, aliquip harmud laboris

Ultricies quis quis dignissim eros laboris urna quis. 

Pt 7

Exercitation voluptate

Exercitation voluptate harmud sint adipiscing commodo eu laboris dolor esse dolor eros elit, ex ea providerent dignissim dolore adipiscing tempuribud. 

1982

Sed aliquam ultrices

Phasellus magna. Suspendisse eu ligula. Quisque rutrum.

1986

Sed aliquam ultrices

Phasellus magna. Suspendisse eu ligula. Quisque rutrum.

1990

In consectetuer

Vivamus quis mi. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum ante ipsum primis in faucibus.

1998

Sed aliquam ultri

Vivamus quis mi. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum ante ipsum primis in faucibus.

Gradient Style Timeline

Donec id justo

Nullam quis ante. Pellentesque dapibus hendrerit tortor. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. 

Donec id justo

Nullam quis ante. Pellentesque dapibus hendrerit tortor. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. 

Donec id justo

Nullam quis ante. Pellentesque dapibus hendrerit tortor. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. 

Donec id justo

Nullam quis ante. Pellentesque dapibus hendrerit tortor. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. 

Pin Text

Header Field

Description Field