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

Standard

Configure

Step

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 event in the timeline. Refer <ns-timeline-event> for individual event guidance.

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. Refer <ns-timeline-event> for individual step guidance.
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.