Timelines

How to add and style timelines.

What is a Timeline?

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

Example Timelines

Adding and Formatting a 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:

The Components of a Timeline

Like many other parts, borders, opacity, and spacing can be applied using the property editor on the right, once the timeline has been selected.

The text 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.

Changing the Orientation of the 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.

Changing the Orientation of the Timeline

Using the 'Compact' Property

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.

Timeline 'Compact' Property

Changing the Icon

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:

Changing Icons in the Timeline

Using the 'Snap Icon' Property

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 Timeline 'Snap Icon' Property

Box Outline

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.

Timeline 'Box' Outline

Adding a New Timeline Item

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.

Duplicating Timeline Parts

Related Information

Text

Customizing and formatting

Hierarchy: parents and children