Timeline
Add steps with icons, titles, descriptions and connecting lines, such as how a trial works.
Use a Timeline to explain a sequence: "Today", "Day 5 reminder", "Day 7 billing". Each row has an icon, a title, an optional description and a line to the next row.
Add it
- Drag Timeline from Content onto the phone.
- Or hover a layer in Layers, click +, then Content, then Timeline.
You get three rows, Feature 1 to Feature 3, each with a white check in an indigo circle. The first two have a light indigo connector.
There is no + on a timeline. To add a row, select a row and duplicate it (⌘D or Ctrl+D, or Duplicate in its … menu). Delete a row with Delete. Rows cannot be dragged to reorder.
Where it can go
In stacks, the header, the footer, tab content and carousel pages.
Design panel
Timeline:
| Section | Control | Default |
|---|---|---|
| Layout | Item gap, Text gap, Column gap (px) | 16, 4, 16 |
| Size | Width, Height | Fill, Fit content |
| Spacing | Padding, Margin | 0 |
Row (inspector name Timeline row): Connector with + or −, Width (default 3, minimum 1), Top margin, Bottom margin, Color (light indigo). The connector joins the row to the next. A duplicated last row has none, so turn it on.
Select the icon, title or description of a row to edit them with the Icon and Text panels.
States
None. The preview outline of a row covers the icon and text together.
Dark mode and screen sizes
Add dark colors to icons, texts and connectors.
Tips and common mistakes
- The last row should have no connector.
- Rename rows to find them in Layers.
In the JSON
The component type is timeline, with items of type timeline_item, each with icon, title, description and connector.