Timelines
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.
Standard Timeline Component
Nunc interdum
Aenean commodo ligula eget dolor. Suspendisse faucibus, nunc et pellentesque egestas.
Etiam vitae tortor
Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris suspendisse.
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.
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
Example Use
1
Step One
Sed mollis eros et ultrices
2
Step Two
Sed mollis eros et ultrices
3
Step Three
Sed mollis eros et ultrices
4
Step Four
Sed mollis eros et ultrices
Step One
Write out more detailed description for the first item in your timeline component. Cras varius. Curabitur a felis in nunc fringilla tristique.
Step Two
Write out more detailed description for the first item in your timeline component. Cras varius. Curabitur a felis in nunc fringilla tristique.
Step Three
Write out more detailed description for the first item in your timeline component. Cras varius. Curabitur a felis in nunc fringilla tristique.
Step Four
Write out more detailed description for the first item in your timeline component. Cras varius. Curabitur a felis in nunc fringilla tristique.