Promo cards

Taxonomic name: M-CARD

Extension: CARDS-EXTENDED

v.4.0.0 - Updated 20/07/18. Archives

Molecule

Promo cards are to used to highlight promotional offers

  • Please restrict promotional heading and descriptive content to two lines in largest desktop view (copy may wrap on to more lines in smaller viewports). Ensure offer heading and description copy are understandable within those constraints.
  • Built to work on light and dark accent colours.

Examples

Full width no link

Promotional heading

Promotional descriptive content.

Full width with link

Promotional heading

Promotional descriptive content.

Read me

Full width no link on dark background

Promotional heading

Promotional descriptive content.

Full width with link on dark background

Promotional heading

Promotional descriptive content.

Read me

50:50 split no link

Promotional heading

Promotional descriptive content.

Promotional heading

Promotional descriptive content.

50:50 split with link

Promotional heading

Promotional descriptive content.

Read me

Promotional heading

Promotional descriptive content.

Read me

50:50 split no link on a dark background

Promotional heading

Promotional descriptive content.

Promotional heading

Promotional descriptive content.

50:50 split with link on a dark background

Promotional heading

Promotional descriptive content.

Read me

Promotional heading

Promotional descriptive content.

Read me

Notes for developers

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 additional stylesheets to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheets:

<link media="all" href="[ CDN Folder Path ]/css/customer/cards-extended.css" rel="stylesheet" />
<!--[if lte IE 8]>
	<link media="all" href="[ CDN Folder Path ]/css/customer/cards-extended-unmq.css" rel="stylesheet" />
<![endif]-->

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.

Code Examples

Full width no link

Promotional heading

Promotional descriptive content.

<div class="l-section [ Modifiers ]">
	<div class="l-content-container">
		<div class="m-card m-card--full-bleed-promo [ Modifiers ]">
			<div class="m-card-content">
				<div class="m-card-content__inner m-card-content__inner--top">
					<h2 class="a-heading a-heading--1 a-heading--semibold">...</h2>
				</div>
				<div class="m-card-content__inner m-card-content__inner--bottom">
					<h3 class="a-heading a-heading--3 a-heading--light">...</h3>
				</div>
			</div>
		</div>
	</div>
</div>

Full width no link

Promotional heading

Promotional descriptive content.

Read me

 
<div class="l-section [ Modifiers ]">
	<div class="l-content-container">
		<a class="m-card m-card--full-bleed-promo [ Modifiers ]">
			<div class="m-card-content">
				<div class="m-card-content__inner m-card-content__inner--top">
					<h2 class="a-heading a-heading--1 a-heading--semibold">...</h2>
				</div>
				<div class="m-card-content__inner m-card-content__inner--bottom">
					<h3 class="a-heading a-heading--3 a-heading--light">...</h3>
					<p class="m-card-readmore"><span>...</span></p>
				</div>
			</div>
		</a>
	</div>
</div>

50:50 split no link

Promotional heading

Promotional descriptive content.

Promotional heading

Promotional descriptive content.

<div class=" l-section [ Modifiers ]">
	<div class="l-content-container">
		<div class="m-card-split-promo">
			<div class="m-card m-card-split-promo__item [ Modifiers ]">
				<div class="m-card-content">
					<div class="m-card-content__inner m-card-content__inner--top">
						<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
					</div>
					<div class="m-card-content__inner m-card-content__inner--bottom">
						<h3 class="a-heading a-heading--3 a-heading--light">...</h3>
					</div>
				</div>
			</div>
			<div class="m-card m-card-split-promo__item [ Modifiers ]">
				<div class="m-card-content">
					<div class="m-card-content__inner m-card-content__inner--top">
						<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
					</div>
					<div class="m-card-content__inner m-card-content__inner--bottom">
						<h3 class="a-heading a-heading--3 a-heading--light">...</h3>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

50:50 split with link

Promotional heading

Promotional descriptive content.

Read me

Promotional heading

Promotional descriptive content.

Read me

 
<div class=" l-section [ Modifiers ]">
	<div class="l-content-container">
		<div class="m-card-split-promo">
			<a class="m-card m-card-split-promo__item [ Modifiers ]">
				<div class="m-card-content">
					<div class="m-card-content__inner m-card-content__inner--top">
						<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
					</div>
					<div class="m-card-content__inner m-card-content__inner--bottom">
						<h3 class="a-heading a-heading--3 a-heading--light">...</h3>
						<p class="m-card-readmore"><span>...</span></p>
					</div>
				</div>
			</a>
			<a class="m-card m-card-split-promo__item [ Modifiers ]">
				<div class="m-card-content">
					<div class="m-card-content__inner m-card-content__inner--top">
						<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
					</div>
					<div class="m-card-content__inner m-card-content__inner--bottom">
						<h3 class="a-heading a-heading--3 a-heading--light">...</h3>
						<p class="m-card-readmore"><span>...</span></p>
					</div>
				</div>
			</a>
		</div>
	</div>
</div>

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--full-bleed-promo Modifier for promo card Yes .m-card  
.m-card-content Base style for the text section of card Yes .m-card > div  
.m-card-content__inner Base style for text section of card used to ensure elements align correctly Yes .m-card-content  
m-card-split-promo Container for 50% split promo cards Yes div  
m-card-split-promo__item 50% promo card styling Yes m-card-split-promo > .m-card  

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.