Timelines
How to add and style timelines.
Last updated
Was this helpful?
How to add and style timelines.
Last updated
Was this helpful?
Timelines are powerful tools for presenting chronological information in a clear, structured, and engaging manner. They can enhance user experience by providing context and simplifying complex information. They can be used to display historical data, for project management, process visualization, or content presentation - they are versatile components in web and app design.
Location in the Parts Library: Base Parts > Data Display > Timeline
Choose your preferred collapse from the Parts Library, select the part where you’d like to add your timeline, and click ‘+ add to page’.
The timeline (parent) houses several 'timeline items'. Each timeline item could include:
A 'timeline start' and/or a 'timeline end' part, depending on the layout of your timeline
Text, such as dates and other content
Timeline dividers
A 'timeline middle' part, which could contain an icon, image or avatar
Here is an example of the various parts that make up a timeline:
To switch the orientation of a timeline, say from horizontal to vertical or vice versa, select the timeline to activate the property editor on the right.
Then, select Orientation, and choose either horizontal or vertical. The orientation of the timeline can be changed based on device size. For example, a horizontal timeline may not display well on a mobile device, so a vertical timeline for smaller-sized devices may be better. Horizontal timelines may be more appropriate for larger screens, ensuring that content is displayed correctly.
The 'compact' property can be used on the timeline to force all the timeline items onto one side. The examples below show how that looks on a vertical timeline and a horizontal timeline.
To change the icon, select it, and then in the right property panel go to Icon > Value Set, and select your preferred icon. Then set the size and color as needed. See the example below:
The 'snap icon' property in the timeline editor allows you to snap the icon to the start instead of the middle. This is true even if there is an image or an avatar that occupies the 'timeline middle' part, rather than an icon.
The 'Box' property creates a faint outline around the part. This can be applied to the whole timeline, to 'timeline start', and 'timeline end' parts.
To apply the box outline, select the part, then go to the 'Box' property in the right property editor. Check the 'Box' checkbox.
To add a timeline item, select the last section of the divider from the timeline item above, and duplicate it using the edit menu in the top toolbar. Then, select a timeline item above that is displayed on the same side as the one you would like to add. Duplicate the selected timeline item using the edit menu. Then remove you can remove the divider at the very end by deleting it.
Like many other parts, , , and can be applied using the property editor on the right, once the timeline has been selected.
The within the timeline is edited the same as the way text is edited in other parts, using both the Text Editor and the Font Editor in the property editing panel on the right.
Text
Customizing and formatting
Hierarchy: parents and children
