Taxonomic name: A-LIST
Added on: v3.0.0 (15/09/17)
Updated on: v5.9.0 (13/07/21)

List

Lists are available either as unordered lists (bullet points are used to define a list of points or to highlight key issues) or ordered (numbered points are used when the list of items needs to be in a particular order).

Design and usage

Usage

Bullet points are used to define a list of points or to highlight key issues. Usually, bulleted lists are used when the list of items doesn't need any particular order.
Plus denotes optional cover items that can be added.
Use the list style which is appropriate to the content. Use lists with ticks and crosses sparingly so as not diminish their visual impact.
Minus denotes optional cover items can be removed.
All lists built to work on light and dark accent colours.

Structure

First level bullet shows with the same left padding as body text.
Second level bullet is intended.
Ordered lists with Roman numeral list should only be used for lists which have up to ten items within them, as Roman numerals become difficult to read above this.
Do not have lists spanning more than eight columns at tablet or desktop screen sizes.

Placement

Second level bullets always need a first level parent.
Do not use the second level bullets without a first level before it.

Examples

Unordered

Interactive example

Code example

<ul class="a-list-unordered">
	<li>...</li>
	<!-- to add a sub bullet point -->
	<li>
	<p>...</p>
	<ul class="a-list-unordered">
		<li>...</li>
	</ul>
	</li>
	<!-- to add a tick -->
	<li class="a-list-unordered__item--tick">...</li>
	<!-- to add a cross -->
	<li class="a-list-unordered__item--cross">...</li>
	<!-- to add a plus -->
	<li class="a-list-unordered__item--plus">...</li>
	<!-- to add a minus -->
	<li class="a-list-unordered__item--minus">...</li>
</ul>

Ordered

Interactive example

Code example

<ol class="a-list-ordered [ Modifiers ]">
	<li>...</li>
</ol>

Ordered - Roman Modifier

This list variant should only be used for lists that have up to ten items within them as roman numerals become difficult to read above this.

Note: When an ordered list with roman modifier is used within another ordered list it will automatically change to lower case roman numerals.

Interactive example

Code example

<ol class="a-list-ordered a-list-ordered--roman [ Modifiers ]">
	<li>...</li>
</ol>

Ordered - Alphabetical Modifier

Note: When an ordered list with alphabetical modifier is used within another ordered list it will automatically change to lower case alphabetical characters.

Interactive example

Code example

<ol class="a-list-ordered a-list-ordered--alpha [ Modifiers ]">
	<li>...</li>
</ol>

Plain ordered or unordered list

Interactive example

Code example

<ul class="a-list-plain">
	<li>...</li>
</ul>

Definition

Interactive example

Code example

<dl class="a-list-definition">
	<dt>...</dt>
	<dd>...</dd>
</dl>

Opening times

Interactive example

Code example

<dl class="a-list-opening-times">
	<dt class="a-list-opening-times__days">...</dt>
	<dd class="a-list-opening-times__hours" itemtype="https://schema.org/OpeningHoursSpecification">
		...
		<meta itemprop="dayOfWeek" content="..." />
		<meta itemprop="opens" content="..." />
		<meta itemprop="closes" content="..." />
	</dd>
</dl>

News category unordered list

Interactive example

Code example

<ul class="a-list-unordered a-list-news">
	<li class="a-list-news__item--author">...</li>
	<li class="a-list-news__item--calendar">...</li>
	<li class="a-list-news__item--clock">...</li>
	<li class="a-list-news__item--duration">...</li>
	<li class="a-list-news__item--location">...</li>
	<li class="a-list-news__item--view">...</li>
</ul>

Tertiary shallow button list

This variant should be used with lists of links to provide a larger than standard hit target but avoid excessive white space and physical length of each list. See buttons for more detail.

Interactive example

Code example

<ul class="a-list-plain a-list-plain--tertiary-buttons">
	<li><button class="a-button a-button--tertiary a-button--tertiary-shallow [ Modifier ]"><span class="a-button__inner">...</span></button></li>
	<li><a class="a-button a-button--tertiary a-button--tertiary-shallow [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
</ul>

Development and test

Notes for developers

Ordered lists

If any list item's numbering extends into the copy, add .a-list-ordered--long to .a-list-ordered to increase the padding to 60px.

Classes overview

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

Class	Outcome	Required	Applied to	Comments
`.a-list-unordered`	Base standard styling for a bulleted list	Yes	`ul`
`.a-list-unordered__item--tick`	Modifier to change bullet to tick		`.a-list-unordered > li`
`.a-list-unordered__item--cross`	Modifier to change bullet to cross		`.a-list-unordered > li`
`.a-list-unordered__item--plus`	Modifier to change bullet to plus		`.a-list-unordered > li`
`.a-list-unordered__item--minus`	Modifier to change bullet to minus		`.a-list-unordered > li`
`.a-list-ordered`	Base standard styling for a numbered list	Yes	`ol`
`.a-list-ordered--roman`	Modifier to display roman numerals instead of numbers		`.a-list-ordered`
`.a-list-ordered--alpha`	Modifier to display alphabetical characters instead of numbers		`.a-list-ordered`
`.a-list-ordered--long`	Adds additional space to the left to allow for much longer to ordered list numbers		`.a-list-ordered`
`.a-list-plain`	Removes all styling from a list apart from some base margins	Yes	`ul`, `ol`
`.a-list-definition`	Base styling for a basic definition list	Yes	`dl`
`.a-list-opening-times`	Base styling for a list of opening times	Yes	`dl`
`.a-list-opening-times__days`	Base styling for a list of opening times	Yes	`.a-list-opening-times > dt`
`.a-list-opening-times__hours`	Base styling for a list of opening times	Yes	`.a-list-opening-times > dd`
`.a-list-news`	Base style for news icon list	Yes	`.a-list-unordered`
`.a-list-news__item--author`	List element icon styling		`.a-list-news > li`	Author icon
`.a-list-news__item--calendar`	List element icon styling		`.a-list-news > li`	Calendar icon
`.a-list-news__item--clock`	List element icon styling		`.a-list-news > li`	Clock icon
`.a-list-news__item--duration`	List element icon styling		`.a-list-news > li`	Duration icon
`.a-list-news__item--location`	List element icon styling		`.a-list-news > li`	Location icon
`.a-list-news__item--view`	List element icon styling		`.a-list-news > li`	View icon
`.a-list-plain--tertiary-buttons`	Modifier class for use with tertiary shallow button lists		`.a-list-plain`

Component releases

Added on: v3.0.0 (15/09/17)
Updated on: v5.9.0 (13/07/21)

Latest update:

updated: Markup for opening times lists has been updated to include additional meta schemae to assist with SEO. Minor spacing changes have also been made to ensure consistency with the show/hide component variant (5px fewer for the right padding and 5px bottom margin added, both for the days).

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