Taxonomic name: M-TIMELINE
Extension: TRACKING
Added on: v4.12.0 (16/08/19)
Updated on: v5.5.0 (23/03/21)

Timeline

To provide customers with a view of the overall process for claim resolution and clarity on where their claim sits within this process.

Design and usage

Placement

Within a full width 12 column area.
Only permitted on white (#FFF)

Structure

Event stamp variants:

Small – Up to four data points
Large – Five or more data points

Event stamp statuses:

Event stamps can have various different statuses with the following background colours:
- Recently completed: Positive Green 10% (#EDF5EA)
- In progress (new only): Warning Orange 10% (#FFF5E5)
- Planned (new only): Guide Blue 10% (#ECF8FF)
- Rejected (new only): Error red 10% (#F7E5E5)
- Default and inactive events: Base Grey 75% (#F3F3F3)
Each event stamp should also have the appropriate status in text at the top of the content area to aid user comprehension and to assist where colour visibility could be an issue for particular users.

Event stamp behaviour:

Mobile: all variants full width
Tablet
- Small - right edge at seven columns
- Large - full width
Desktop
- Small - right edge at seven columns
- Large - right edge at 10 columns

Date Label

Format: Day/Month/Year (can be adjusted based on globalisation/international requirements)
20 character limit

Event stamp variants (can contain):

Timeline arrow with fill
Required - Status in order to aid user comprehension and to assist where colour visibility could be an issue for particular users.
Time stamp (with icon)
Heading group - H2 + H3 with icon (icon dropped for mobile) - large variant only
Heading group - H2 + H3
Heading - H2
Short or long labels (max 80 characters)
Body copy
Show more component should be used for large amounts of content, following the component's rules
Within the show more component:
- Show/hide (adapted to fit within event stamp dimensions)
- Buttons
- Additional / related content heading (if required)
- Cards (download cards permitted only for potential related / additional content touch points)

Event stacking:

Individual events: 30px vertical (desktop, tablet and mobile)
Same date events: 15px vertical (desktop, tablet and mobile)

Timeline specs:

More events: Include fade out from circle to bottom
No more events: Hard stop at circle

Filter:

FW dropdown (potential to contain following options – depends on length/duration of timeline):
- Descending (all events, latest on top)
- Ascending (all events, oldest on top)
- Previous week (more than six days old)
- Previous month (older than the number of days in the relevant month, ie. February 28/29+ days, September/April/June/November 30+ days, all others 31+ days)
- Previous six months (more than five months + relevant month days old)
- Previous year (more than 11 months + relevant month days old)
Status key:
- Planned (Optional)
- In progress
- Completed
- Inactive
- Rejected

Accessibility and screen readers

Status pins include an icon and the event stamp contains a status title in text at the top of the content area in order to aid user comprehension and to assist users where colour visibility could be an issue.
Colour contrast and typography WCAG compliant

Use case and exceptions

Only tertiary cards can be used within large event stamps
Always include status on all events as first item
'Load more' button only present if timeline events are hidden from view and to be presented

Examples

Interactive example

Timeline with filter and more events to be shown

Timeline with all events showing

Timeline within show/hide

Code example

<div class="m-timeline" data-module="m-timeline">
	<div class="m-timeline-key-sort">
		<div class="m-timeline-key-sort__key">
			<h3 class="a-heading a-heading--3 a-heading--semibold">Status key</h3>
			<ul class="m-timeline-key">
				<li class="m-timeline-key__item m-timeline-key__item--planned">Planned</li>
				<li class="m-timeline-key__item m-timeline-key__item--in-progress">In progress</li>
				<li class="m-timeline-key__item">Completed</li>
				<li class="m-timeline-key__item m-timeline-key__item--inactive">Inactive</li>
				<li class="m-timeline-key__item m-timeline-key__item--rejected">Rejected</li>
			</ul>
		</div>
		<div class="m-timeline-key-sort__sort">
			<form>
				<fieldset>
					<legend>Sort or filter events</legend>
					<div class="m-form-row m-form-row--full-width u-margin--bottom-none u-margin--top-none m-timeline__sort">
						<label class="a-heading a-heading--3 a-heading--semibold u-margin--top-none" for="...">View order of events</label>
						<div class="m-form-row__content">
							<span class="a-dropdown">
								<select class="a-dropdown__select" name="order" id="...">
									<option val="...">Decending (all events)</option>
									<option val="...">Ascending (all events)</option>
									<option val="...">Previous week</option>
									<option val="...">Previous month</option>
									<option val="...">Previous 6 months</option>
									<option val="...">Previous year</option>
								</select>
								<span class="a-dropdown__ui"></span>
							</span>							<button class="a-button a-button--primary a-button--form" type="submit"><span class="a-button__inner">Filter</span></button>
						</div>
					</div>
				</fieldset>
			</form>
		</div>
	</div>	<hr class="a-divider-line a-divider-line--horizontal-dashed a-divider-line--30-all" />	<ul class="m-timeline__list [ Modifers ]">
		<li class="m-timeline-list-item [ Modifers ]">
			<p class="m-timeline-list-item__date">...</p>
			<div class="m-timeline-list-item__content">
				<ul class="m-timeline-list-item__status">
					<li>...</li>
					<li class="a-text-icon a-text-icon--clock m-timeline-list-item__time">...</li>
				</ul>
				<div class="m-heading-group">
					<h2 class="m-heading-group__item a-heading a-heading--2 a-heading--semibold">...</h2>
					<h3 class="m-heading-group__item a-heading a-heading--3 a-heading--light">...</h3>
				</div>
				...
			</div>
		</li>
		<li class="m-timeline-list-item m-timeline-list-item--large [ Modifers ]">
			<p class="m-timeline-list-item__date">...</p>
			<div class="m-timeline-list-item__content">
				<ul class="m-timeline-list-item__status">
					<li>...</li>
					<li class="a-text-icon a-text-icon--clock m-timeline-list-item__time">...</li>
				</ul>
				<div class="m-heading-group">
					<h2 class="m-heading-group__item a-heading a-heading--2 a-heading--semibold">...</h2>
					<h3 class="m-heading-group__item a-heading a-heading--3 a-heading--light">...</h3>
				</div>
				<div class="m-show-more u-margin--top-none" data-module="m-show-more" data-expand="Show more information" data-contract="Show less information">
					<p>...</p>
					<ul class="a-list-unordered">
						<li>...</li>
						<li><p>...</p>
							<ul class="a-list-unordered">
								<li>...</li>
							</ul>
						</li>
					</ul>					<div class="m-showhide u-margin--bottom-none" data-module="m-showhide" data-module-load="true">
						<h3 class="a-heading a-heading--2 a-heading--light m-showhide__heading">...</h3>
						<div class="m-showhide__content">
							<ul class="a-list-plain l-columns l-columns--2-large">
								<li class="l-columns__column m-card m-card--link m-card--download m-card--tertiary t-accent-light t-accent-light--1">
									<div class="m-card-content">
										...
									</div>
								</li>
								<li class="l-columns__column m-card m-card--link m-card--download m-card--tertiary t-accent-light t-accent-light--1">
									<div class="m-card-content">
										...
									</div>
								</li>
							</ul>
							<ul class="m-button-group">
								<li class="m-button-group__item"><button class="a-button a-button--primary" type="button">...</button></li>
								<li class="m-button-group__item"><button class="a-button" type="button">...</button></li>
							</ul>
							<hr class="a-divider-line a-divider-line--horizontal-dashed a-divider-line--30-all" />
							<h4 class="a-heading a-heading--3">...</h4>
							<div class="m-card m-card--link m-card--download m-card--tertiary t-accent-light t-accent-light--1">
								<div class="m-card-content">
									...
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</li>	</ul>	<hr class="a-divider-line a-divider-line--horizontal-dashed a-divider-line--30-all" />	<div class="m-timeline__load-more">
		<button class="a-button a-button--icon a-button--add" type="button"><span class="a-button__inner">Load more events</span></button>
	</div>
</div>

Development and test

Notes for developers

There is no functionality built for filtering of loading more events. When using AJAX to filter the events the button can be hidden using the class m-timeline__sort--ajax on m-timeline__sort.

When using JavaScript to update the timeline ensure that appropriate aria is used so the updates to content are announced.

Extension component

This component forms part of the 'tracking' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:

<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/tracking.css" rel="stylesheet" />

Notes for testers

When JavaScript is not available any filtering or loading of more events must be possible via a page reload.
When using JavaScript to update the timeline ensure that appropriate aria has been used so the update to content is announced.
When JavaScript is not available all in progress and recently completed cards will display in their fully open states with white backgrounds.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class	Outcome	Required	Applied to	Comments
`.m-timeline`	Base style for the timeline	Yes	`div`
`.m-timeline-key-sort`	Base style for laying out timeline key and sort	Yes	`.m-timeline > div`
`.m-timeline-key-sort__key`	Base style for timeline key container	Yes	`.m-timeline-key-sort > div:first-child`
`.m-timeline-key-sort__sort`	Base style for timeline sort container	Yes	`.m-timeline-key-sort > div:last-child`
`.m-timeline-key`	Base style timeline key	Yes	`m-timeline-key-sort__key > ul`
`.m-timeline-key__item`	Base style timeline key item	Yes	`.m-timeline-key`
`.m-timeline-key__item--in-progress`	Modifier to add 'in progress' style to the timeline key item		`.m-timeline-key__item`
`.m-timeline-key__item--planned`	Modifier to add 'planned' style to the timeline key item		`.m-timeline-key__item`
`.m-timeline-key__item--inactive`	Modifier to add 'inactive' style to the timeline key item		`.m-timeline-key__item`
`.m-timeline-key__item--rejected`	Modifier to add 'rejected' style to the timeline key item		`.m-timeline-key__item`
`.m-timeline__sort`	Base style for the timeline filter	Yes	`.m-timeline-key-sort__sort > form div`
`.m-timeline__sort--ajax`	Modifer to hide the form button when AJAX is being used to filter the timeline		`..m-timeline__sort`
`.m-timeline__list`	Base style for list of events	Yes	`.m-timeline > ul`
`.m-timeline__list--partial`	Modifier for when not displaying a complete timeline		`.m-timeline__list`
`.m-timeline-list-item`	Base style for event item	Yes	`.m-timeline__list > li`
`.m-timeline-list-item--in-progress`	Modifier for 'in-progress' event item		`.m-timeline-list-item`
`.m-timeline-list-item--recently-completed`	Modifier for 'recently completed' event item		`.m-timeline-list-item`
`.m-timeline-list-item--planned`	Modifier for 'planned' event item		`.m-timeline-list-item`
`.m-timeline-list-item--inactive`	Modifier for 'inactive' event item		`.m-timeline-list-item`
`.m-timeline-list-item--rejected`	Modifier for 'rejected' event item		`.m-timeline-list-item`
`.m-timeline-list-item--new`	Modifier for 'new' events within the timeline to highlight them further		`.m-timeline-list-item--in-progress` `.m-timeline-list-item--recently-completed` `.m-timeline-list-item--planned` `.m-timeline-list-item--rejected`	Only apply to the latest event(s) on the timeline
`.m-timeline-list-item--large`	Modifier for for large event item		`.m-timeline-list-item`
`.m-timeline-list-item--hidden-date`	Modifier for hiding the events date when it it the same as a previous one		`.m-timeline-list-item`
`.m-timeline-list-item__date`	Base style for event item date stamp	Yes	`.m-timeline-list-item > p`
`.m-timeline-list-item__content`	Base style for event card	Yes	`.m-timeline-list-item > div`
`.m-timeline-list-item__status`	Base style the event status on the individual timeline card	Yes	`.m-timeline-list-item__content > ul` `.m-timeline-list-item__content > p`
`.m-timeline-list-item__time`	Base style for event time stamp		`.m-timeline-list-item__status > li.a-text-icon.a-text-icon--clock` `.m-timeline-list-item__content > p.a-text-icon.a-text-icon--clock`
`.m-timeline__load-more`	Base style for load more button when displaying a partial timeline	Yes	`..m-timeline-list ~ div`

Component releases

Added on: v4.12.0 (16/08/19)
Updated on: v5.5.0 (23/03/21)

Latest update:

Additional statuses have been added for inactive and rejected items, while heading groups (including those with icons) can now be used in place of simple h2 and h3 tags; guidance for these has been included in the documentation.
updated: Status pins have been updated to include an icon and the event stamp should now also include the status title in text at the top of the content area. These changes have been made in order to aid user comprehension and to assist users where colour visibility could be an issue.
fixed: JavaScript for controlling the background colour of large timeline items when expanded was not working, this has now been fixed.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team