Timeline Patterns

Goal

Use the timeline pattern to show progress through steps in a process or project. These patterns can be used to show progress in both completed and ongoing processes. This page explains how you can use this pattern in your interface, and walks through the design structure in detail.

There are three slightly different timeline patterns; timeline, timeline (lightweight), and timeline (progress) located under the PATTERNS tab on the left navigation menu of the palette. All three have the same functionality but different a different look. Test out all three to see which one aesthetically matches your business needs.

Design structure

The main components in these patterns are side by side layouts, styled icons, and styled text. These components are configured to stack based on the width of the screen size in which you're viewing the timeline. In this design structure breakdown, we'll use the basic timeline pattern to explain how each component is used.

[Line 1-181] Side by side layouts

This pattern consists of nine similar side by side layouts, all of which contain multiple rich text components. This pattern also uses two configurations of side by side layouts to create the timeline format. This pattern leverages the horizontal line component to be responsive at every screen size.

The first uses styled icons and styled text to create the steps on the timeline (lines 4-26).

The second uses the horizontal line component to format the steps between the timeline (lines 27-34). This side by side component is on either side of the number of days displayed in text between each step of the timeline.

In the side by side layouts with both icons and text, char(10) is used to make the styled text bold. char(10) is similarly used in the timeline (progress) pattern to put emphasis on the completed steps in the timeline.

Pattern expression

This pattern introduces a 181-line expression to the interface.

Feedback