Timeline
Timeline web components are interactive UI elements that organize chronological information on web pages. They present events or data points along a linear timeline, helping users grasp the sequence and relationships between them. By condensing a significant amount of information into a compact format, timelines enhance user experience and make it easier to understand the progression of events.
Timelines are particularly useful when dealing with a large volume of related information or when emphasizing the temporal aspect of data. They offer a visually concise and intuitive way to navigate through different time periods and explore specific events or data points of interest.
By presenting information in a chronological order, timelines reduce cognitive overload and enable users to efficiently explore and understand temporal data.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files
Functional grouping: Containers
Demo
Code
Responsive preview
Usage best practices
In general, timelines should be used to break up large sections of temporal content related to the page topic into smaller chunks.
To help users understand related sections of content, it is also beneficial to add a heading title above the timeline indicating the content topics for the timeline.
Usage examples:
- managing projects
- presenting historical data
- product development
Do
Keep items titles clear and succinct so it's quick and easy to read.
Use the images for each timeline item for content purpose not for decoration, this help users see how it directly relates to the content at hand.
Don't
Do not use timelines as a way to shorten web pages.
Do not put must read information inside a collapsed timeline item as users may not expand the section to read the content.
Do not insert timelines into other containers such as accordions and tabs.