Overview

Represents a sequence of events that happen within a process, and shows the status.

The timeline gives an overview of a process and can show the progression of a customer journey. Its purpose is to create situational awareness for the user and manage expectations.

Examples

Configure

Guidance

Do

• Use a maximum of 10 steps.
• Consider if the title duplicates page title.
• Provide helpful messaging.
• Use summary to set expectations for the standard variant.

Don't

• Add too much detailed content.
• Use illustrations or icons in additional content.
• Use overly long event names.
• Use timestamp if it causes confusion with a date elsewhere on the page for the standard variant.

Standard

Key

Key	Field type	Guidelines
A	Heading	Describes the process the whole timeline is showing. It can be left blank if, for example, there is a ns-landmark immediately preceding which describes it.
B	Summary	Optional. You can use a short sentence here to help manage expectations.
C	Step Count	Display information on the number of events in a process (up to a maximum of 10) and how many have been completed so far.
D	Decoration	Choose between default dots, icons or numbers.
E	Event	An individual step in the timeline.
F	Event Heading	Concise and clear heading description. Keep as short as possible.
G	Event Icon	The icon decoration for that particular event. This can change depending on status.
H	Event Status	Status is also shown by colour and form of the interconnecting lines and circles in the timeline. E.g. In Progress is ‘information blue’ and has larger roundels and icons that are solid. Whereas Pending uses a grey outline and is smaller. (See Status below.)
I	Additional Content	Add further information relevant to this step to aid customer understanding, or if an action is required.
J	Event Completed Timestamp	Events that have been successfully completed, there is the option to display a time-stamp alongside the status.

Step

Key

Key	Field type	Guidelines
A	Heading	Describes the process the whole timeline is showing. It can be left blank if, for example, there is a ns-landmark immediately preceding which describes it.
B	Decoration	Number or Fallback. Number is default, the fallback is a dot if no index is specified.
C	Event	An individual step in the timeline.
D	Event Heading	Concise and clear heading description. Keep as short as possible.
E	Additional Content	Add further information relevant to this step to aid customer understanding.

Implementation

Placement

The ns-timeline component can only be used as a child of the <ns-panel> element.

Specification

Attributes

show-step-count

Property

showstepcount

Description

Whether to show the step count.

Type

boolean

Default

false

type

Property

type

Description

The type of the timeline.

Type

string

Options

standard step

Default

standard

Slots

Slot	Permitted tags	Description
heading	<h2>	The heading of the timeline.
summary	<p>	The summary of the timeline.
event	<ns-timeline-event>	An event of the timeline.

Related links

This page covers most of the ways you can use ns-timeline. Please reach out to us if you are unsure about a potential use. Here are some useful links to related content:

• ns-component
• ns-component