Timelines

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
{
  a!sideBySideLayout(
    items: {
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextIcon(
              icon: "paper-plane",
              color: "SECONDARY",
              size: "MEDIUM"
            ),
            char(10),
            a!richTextItem(
              text: upper("Applied"),
              style: "STRONG"
            ),
            char(10),
            a!richTextItem(
              text: todate("11/5/2018")
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextItem(
              text: char(9472) & char(9472) & char(160),
              color: "#bfbfbf"
            ),
            "4d",
            a!richTextItem(
              text: char(160) & char(9472) & char(9472),
              color: "#bfbfbf"
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextIcon(
              icon: "phone",
              color: "SECONDARY",
              size: "MEDIUM"
            ),
            char(10),
            a!richTextItem(
              text: upper("Phone Interview"),
              style: "STRONG"
            ),
            char(10),
            a!richTextItem(
              text: todate("11/9/2018")
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextItem(
              text: char(9472) & char(9472) & char(160),
              color: "#bfbfbf"
            ),
            "7d",
            a!richTextItem(
              text: char(160) & char(9472) & char(9472),
              color: "#bfbfbf"
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextIcon(
              icon: "building-o",
              color: "SECONDARY",
              size: "MEDIUM"
            ),
            char(10),
            a!richTextItem(
              text: upper("Onsite Interview"),
              style: "STRONG"
            ),
            char(10),
            a!richTextItem(
              text: todate("11/16/2018")
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextItem(
              text: char(9472) & char(9472) & char(160),
              color: "#bfbfbf"
            ),
            "35d",
            a!richTextItem(
              text: char(160) & char(9472) & char(9472),
              color: "#bfbfbf"
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextIcon(
              icon: "handshake-o",
              color: "SECONDARY",
              size: "MEDIUM"
            ),
            char(10),
            a!richTextItem(
              text: upper("Offer Accept"),
              style: "STRONG"
            ),
            char(10),
            a!richTextItem(
              text: todate("12/21/2018")
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextItem(
              text: char(9472) & char(9472) & char(160),
              color: "#bfbfbf"
            ),
            "227d",
            a!richTextItem(
              text: char(160) & char(9472) & char(9472),
              color: "#bfbfbf"
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextIcon(
              icon: "user-plus",
              color: "SECONDARY",
              size: "MEDIUM"
            ),
            char(10),
            a!richTextItem(
              text: upper("Start"),
              style: "STRONG"
            ),
            char(10),
            a!richTextItem(
              text: todate("8/5/2019")
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      )
    },
    alignVertical: "MIDDLE",
    stackWhen: {
      "PHONE",
      "TABLET_PORTRAIT"
    }
  )
}
Open in Github

On This Page

FEEDBACK