Skip to content

Components / Timeline

Timeline

A timeline contains time-series data like an activity stream or historical audit log. Timelines can contain large data sets but can also be used for small lists, such as a daily digest of emails sent to a user.

Today
2:01 pm
modified the Mobile Banking ad.
1:32 pm
created a new untitled ad.

Structure

Elements

Timeline

The timeline contains the content that will be displayed in the linear timeline and includes the line that leads the user down the page.

The timeline contains timeline items.

Timeline item

The timeline item groups all activity for a specific day (or the base duration of time).

Dot

For generic events, use the timeline dot. This is a small circle next to the date object that shows a new grouping of events.

Type

For events that have a type, use the type element instead of the dot. This element is larger than a dot so that it can contain an icon.

Don't
Do not use text inside of timeline dots.
Don't
Avoid using dots and types in the same timeline.

Activity item

Inside an item group you’ll have at least one activity item which contains the time, description of the event, and an optional action.

2:01 pm
Ben created a new page and called it "FAQs"
© 2020 Jack Henry & Associates, Inc. Trademark notice
Version 2.0.0-beta.5.1. Last updated December 16, 2020.