Timeline Patterns

Tip: Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.

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.

image of a timeline with icons, text labels, and dates

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-198] 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. Also, the stackWhen parameter is used to format the timeline at smaller screen sizes (lines 193-196).

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

The second uses styled text and the char() function within rich text components to create a styled format between steps in the timeline (lines 27-44). The char() function here has multiple uses. char(9472) creates a line, while char(160) adds a space (lines 32 and 37). These two components are 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 198-line expression to the interface.

Feedback

Was this page helpful?