Skip to content

Timeline event

<ns-timeline-event>

Overview

A partial component for the timeline, to show an event.

Examples

Guidance

Standard

Labelled diagram of ns-timeline

Key

KeyField typeGuidelines
AIconThe icon decoration for that particular event. This can change depending on status. Refer Status table below.
BHeadingConcise and clear heading description. Keep as short as possible.
CStatusStatus 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. Refer Status table below.
DAdditional contentAdd further information relevant to this step to aid customer understanding, or if an action is required.
ECompleted status timestampEvents that have been successfully completed, there is the option to display a time-stamp alongside the status.

Event Status

Each event has a status. The status of the event is controlled by the decoration used.

DecorationStatusDescription
pendingpendingCommunicates that the event has yet to commence.
in progressinprogressIndicates that progress is currently being made on this step.
successcompletedThe event has been successfully completed.
action requiredactionrequiredThis is used when a customer needs to take action in order to proceed with the process.
warningwarningInforms of a problem with low severity such as foreseeable delays or outages etc. The problem is expected to be automatically resolved as the situation changes.
errorerrorThis is a failure indication. Something couldn’t be resolved and so has halted the whole process marking other inprogress\ pending event(s) cancelled. It should be accompanied by a helpful message.
cancelledcancelledCommunicates that the event has been cancelled because of the error in any inprogress events.

Icons & numerals

There are 3 styles of timeline to choose from in the ‘overview decorations’ - default, icon, or number.

Default

Uses a circle and implies nothing other than it is an event.

Icons

These can be selected from a list to help convey meaning for each event and make it easier to identify a step. If selected, all events will need an icon chosen from the list.

Numbers

For use when an order should be shown.

Some icons are special and automatically reserved for use only with a particular status, such as Complete tick, Action required arrow, Warning triangle, and Error diamond. These show on all the variants of ‘overview decoration’.

Implementation

Placement

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

Specification

Attributes

aria-current

Property
ariaCurrent
Type
string

status

Property
status
Description
The status of the event.
Type
string
Options
pending inprogress actionrequired warning error completed cancelled
Default
pending

icon

Property
icon
Description
The name of the icon to be displayed.
Type
string
Options
Refer to our icons.
Default

index

Property
index
Description
The index of the event.
Type
number
Default
0

updated-at

Property
updatedAt
Description
The date and time of the event.
Type
string
Default

role

Property
role
Type
string
Default
listitem

type

Property
type
Type
string
Default
standard

Slots

SlotPermitted tagsDescription
headingThe heading of the event.
Anonymous slot<ns-card> <p> The content of the event. Normally a card.

Specification notes

status

The status attribute should not be added when <ns-timeline-event> is placed in <ns-timeline> step variant.

Last updated: