Promo cards
Taxonomic name: M-CARD
Extension: CARDS-EXTENDED
v.4.9.0 - Updated 24/05/19. 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
Full width no link on dark background
Promotional heading
Promotional descriptive content.
Full width with link on dark background
50:50 split no link
Promotional heading
Promotional descriptive content.
Promotional heading
Promotional descriptive content.
50:50 split with link
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
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:
<!--[if !IE | gt IE 8]><!-->
<link media="all" href="[ CDN Folder Path ]/css/customer/cards-extended.css" rel="stylesheet" />
<!--<![endif]-->
<!--[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
<div class="l-section [ Modifiers ]">
<div class="l-content-container">
<a class="m-card m-card--full-bleed-promo [ Modifiers ]" href="...">
<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
<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 ]" href="...">
<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 ]" href="...">
<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 > div |
|
.m-card-content__inner--top |
Base style for text content of card used to ensure correct spacing | Yes | .m-card-content__inner |
|
.m-card-content__inner--bottom |
Base style for text content of card used to ensure correct spacing | Yes | .m-card-content__inner |
|
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.