Taxonomic name: M-CARD-NUMERIC
Extension: CARDS-EXTENDED
Added on: v3.0.0 (15/09/17)
Updated on: v5.6.0 (20/04/21)

Numeric cards

Numeric cards are designed to be used to convey a sequential process which needs to be followed.

Design and usage

Should only be used for white or light grey cards
A maximum of three cards can be placed alongside each other in desktop and at tablet view and one at mobile view.
When including a date line on a card, do not abbreviate the date; instead, use the full month name ie. 30 March 2016.
Can be used for both editorial (standard links) and navigation (whole card as a link) cards.

Examples

Interactive example

Code example

Editorial card (no link / internal link)

<li class="m-card [ Modifiers ]">
	<div class="m-card-image [ Modifiers ]">
		<picture>
			<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
			...
			<source type="image/webp" srcset="..." width="..." height="..." />
			<img src="..." decoding="async" width="..." height="..." alt="" />
		</picture>
		<span class="m-card-numeric"><span class="u-hidden--visually">Step </span>[Numeric]<span class="u-hidden--visually"> of [Total numeric]</span></span>
	</div>
	<div class="m-card-content">
		...
	</div>
</li>

Link card (whole card link)

<li class="m-card [ Modifiers ]" href="...">
	<div class="m-card-image [ Modifiers ]">
		<picture>
			<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
			...
			<source type="image/webp" srcset="..." width="..." height="..." />
			<img src="..." decoding="async" width="..." height="..." alt="" />
		</picture>
		<span class="m-card-numeric"><span class="u-hidden--visually">Step </span>[Numeric]<span class="u-hidden--visually"> of [Total numeric]</span></span>
	</div>
	<div class="m-card-content">
		<div class="m-card-content__inner">
			<h2 class="a-heading a-heading--2 a-heading--semibold"><a class="m-card__link" href="..." aria-describedby="...">...</a></h2>
			...
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			<p class="m-card-readmore" id="..." aria-hidden="true"><span>...</span></p>
		</div>
	</div>
</li>

Optional white card with border on white background

See tertiary cards for more information.

Development and test

Notes for developers

Ensure the <span> element for the numeric is placed within the <div class="m-card-image"> element.

A maximum of three cards can be placed alongside each other in desktop and at tablet view and one at mobile view.

When including a date line on a card, do not abbreviate the date; instead, use the full month name, for example 30 March 2016.

Ensure the relevant accent colour type and colour option have both been specified for the card to guarantee the correct font colours within the card.

Lazy loading can be applied to cards using images. For how to do this see the lazy loading page for reference.

Extension component

This component forms part of the 'cards-extended' 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/cards-extended.css" rel="stylesheet" />

Notes for testers

Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
Ensure that when hovering over a link the style changes noticeably.
Ensure that when a link has focus the style changes noticeably.
Ensure that text within links is descriptive of what or where the link is going. Additional descriptive text can be hidden visually from the user to aid in make the link understandable especially if there area number of links such as "Find out more" on the page which go to different locations.
Use a screen reader to confirm that the links are understandable.

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-card`	Base style for card	Yes	`.l-columns-column`
`.m-card-numeric`	Base style for numeric	Yes	`span`	Ensure the `<span>` element for the numeric is placed within the `<div class="m-card-image">` element.

Keyboard operations

TAB: Tabbing to an anchor should make the link clearly visually different so that the focus point on the page is obvious to the user
SPACE or ENTER: With focus on an anchor, pressing SPACE or ENTER will open the relevant page.

Component releases

Added on: v3.0.0 (15/09/17)
Updated on: v5.6.0 (20/04/21)

Latest update:

updated: To improve page load and layout times the additional attributes decoding="async", width and height must be set on all inline images.
updated: Markup has changed to use the picture element to improve page performance by allowing different sized images to be served for different screen sizes.

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