Taxonomic name: M-CARD--PROMO
Extension: CARDS-EXTENDED
Added on: v4.12.0 (16/08/19)
Updated on: v5.6.0 (20/04/21)

Promo cards with imagery

Promo cards are a basic card type which can be used to highlight promotional offers. This variant allows the addition of a background image for improved visual presentation.

Design and usage

Structure

Background image can only be used with a 12 column 100% promo card.
The content within the promo card, plus the top and bottom padding will determine the height of the promo card.
A heading, CTA and or link is the minimum requirement as content for the promo card.
To aid legibility, a black tint @25% should be used over the image.
A background colour should also be specified as a fallback in the event an image is unavailable.
Content and text can be either left aligned or centred within the card.

Accessibility and screen readers

For legibility, text within the background image card can only be used with:
- H2 semi-bold heading.
- H3 regular for descriptive text.
Ensure the fallback background colour meets WGAC AA guidelines for text legibility.

Placement

Can be placed anywhere within a section.
Can be combined with other cards (tertiary, image card, full bleed image card etc); with a 30px top or bottom margin to create an editorial layout.

Design anatomy

Min-max width 12 columns (1230px).
Promo card ending with a tertiary link:
- Tertiary link height should always be 55px high.
- Tertiary link and icon should always be 55px high.
- Top padding of tertiary link 10px.
Promo card ending with a button CTA:
- Single button CTA:
  - Top padding 30px.
- 2 button CTA:
  - Button CTAs should stack horizontally with a 20px margin between the two.
  - Top padding 30px.
In the event that both CTAs can no longer stack horizontally the CTAs should stack vertically. Both CTAs should be 100% of the cards width minus the cards internal padding with a 20px top and bottom margin.
Promo card in-out rules
- Desktop In 80px Out 60px.
- Tablet In 60px Out 40px.
- Mobile In 60px Out 40px.
Imagery
- Can be aligned either top, bottom or centred.
- Recommended to choose an alignment for photography based on visual impact/framing of relevant content and its alignment.
- Bear in mind visual noise and alignment. As it will be appearing with copy overlaid, bear in mind content alignment, responsive breakpoints and legibility.

Examples

Editorial promo image cards

Interactive example

Code example

<div class="m-card m-card-full-bleed m-card--promo [ Modifiers ]" data-module="u-objectfit">
	<div class="m-card__image">
		<picture>
			<source media="(min-width: ...)" srcset="..." width="..." height="..." />
			...
			<source srcset="..." width="..." height="..." />
			<img src="..." decoding="async" width="..." height="..." alt="" />
		</picture>
	</div>
	<div class="m-card-content [ Modifiers ]">
		<div class="m-card-content__inner">
			<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
			<h3 class="a-heading a-heading--3">...</h3>
			<button class="a-button a-button--tertiary  a-button--tertiary-shallow"><span class="a-button__inner">...</span></button>
		</div>
	</div>
</div>

Navigational promo image cards

Interactive example

Code example

<div class="m-card m-card--link m-card-full-bleed m-card--promo [ Modifiers ]" data-module="u-objectfit">
	<div class="m-card__image">
		<picture>
			<source media="(min-width: ...)" srcset="..." width="..." height="..." />
			...
			<source srcset="..." width="..." height="..." />
			<img src="..." decoding="async" width="..." height="..." alt="" />
		</picture>
	</div>
	<div class="m-card-content [ Modifiers ]">
		<div class="m-card-content__inner">
				<h2 class="a-heading a-heading--2 a-heading--semibold"><a class="m-card__link" href="..." aria-describedby="..."></h2>
				<h3 class="a-heading a-heading--3">...</h3>
		</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>
</div>

Development and test

Notes for developers

If using a srcset attribute for images, minimum 16:9 ratio image sizes are as follows;

Mobile - 560px wide x 315px high
Tablet - 1296px wide x 729px high
Desktop - 3200px wide x 1800px high

The default image should always be 3200px x 1800px (using 16:9 ratio) to ensure full browser compatibility.

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

Ensure that there is sufficient text within the anchor tag for it to be understandable where the link is going when read on its own.

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--promo`	Modifier for full width promo card	Yes	`.m-card`
`.m-card-full-bleed`	Modifier for card with image a full bleed image	Yes	`.m-card`	Must be used in combination with `.m-card--promo`. Image is centred by default
`.m-card-full-bleed--focus-top`	Modifier for image focus positioning		`.m-card`	Focus to the top of the image
`.m-card-full-bleed--focus-bottom`	Modifier for image focus positioning		`.m-card`	Focus to the bottom of the image
`.m-card-content`	Base style for the text content of card	Yes	`.m-card > div`	Centred by default
`.m-card-content--left`	Modifier for text content positioning		`.m-card-content`	Positions text content to the left

Keyboard operations

TAB: Tabbing to an anchor should make the social 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 social page.

Component releases

Added on: v4.12.0 (16/08/19)
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