![](/sites/default/files/styles/small_hero_banner/public/image/2021-10/HERO_Group%20Supplemental%20Health%20%2B%20Disability%20Insurance_2400x800.png?h=b2214aba&itok=h3S_hU3Q)
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
Aenean commodo ligula eget dolor. Suspendisse faucibus, nunc et pellentesque egestas.
Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris suspendisse.
Alternate Style Timeline
Pins alternate from bottom and top of timeline bar.
Lorem
Praesent congue erat at massa. Praesent nonummy mi in odio. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo.
Donec
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Phasellus nec sem in justo pellentesque facilisis.
Ipsum
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Lorem
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus euismod mauris.
Turpis
Aenean viverra rhoncus pede. Proin faucibus arcu quis ante. Ut tincidunt tincidunt erat.
1982
Phasellus magna. Suspendisse eu ligula. Quisque rutrum.
1986
Phasellus magna. Suspendisse eu ligula. Quisque rutrum.
1990
Vivamus quis mi. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum ante ipsum primis in faucibus.
1998
Vivamus quis mi. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Vestibulum ante ipsum primis in faucibus.
Gradient Style Timeline
Pin Text
Description Field
Example Use
1
Sed mollis eros et ultrices
2
Sed mollis eros et ultrices
3
Sed mollis eros et ultrices
4
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.