- Taxonomic name: M-CARD--PROMO
- Extension: CARDS-EXTENDED
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.5.0 (23/03/21)
Promo cards
Promo cards are a basic card type which can be used to highlight promotional offers.
Design and usage
- 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
Interactive example
Code example
<div class="l-section [ Modifiers ]">
<div class="l-content-container">
<div class="m-card m-card--promo [ Modifiers ]">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--1 a-heading--semibold">...</h2>
<p class="a-heading a-heading--3 a-heading--light">...</p>
</div>
</div>
</div>
</div>
</div>Full width with link
Interactive example
Code example
<div class="l-section [ Modifiers ]">
<div class="l-content-container">
<div class="m-card m-card--link m-card--promo [ Modifiers ]" href="...">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--1 a-heading--semibold"><a class="m-card__link" href="..." aria-describedby="..."></h2>
<p class="a-heading a-heading--3 a-heading--light">...</p>
</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>
</div>
</div>50:50 split no link
Interactive example
Code example
<div class=" l-section [ Modifiers ]">
<div class="l-content-container">
<ul class="a-list-item m-card-split-promo">
<li class="m-card m-card-split-promo__item [ Modifiers ]">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
<p class="a-heading a-heading--3 a-heading--light">...</p>
</div>
</div>
</li>
<li class="m-card m-card-split-promo__item [ Modifiers ]">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
<p class="a-heading a-heading--3 a-heading--light">...</p>
</div>
</div>
</li>
</ul>
</div>
</div>50:50 split with link
Interactive example
Code example
<div class=" l-section [ Modifiers ]">
<div class="l-content-container">
<ul class="a-list-plain m-card-split-promo">
<li class="m-card m-card--link m-card-split-promo__item [ Modifiers ]" href="...">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--1 a-heading--semibold"><a class="m-card__link" href="..." aria-describedby="..."></h2>
<p class="a-heading a-heading--3 a-heading--light">...</p>
<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>
<li class="m-card m-card--link m-card-split-promo__item [ Modifiers ]" href="...">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--1 a-heading--semibold"><a class="m-card__link" href="..." aria-describedby="..."></h2>
<p class="a-heading a-heading--3 a-heading--light">...</p>
</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>
</ul>
</div>
</div>Full width with CTA
Interactive example
Code example
<div class="m-card m-card--promo t-accent-dark t-accent-dark--7">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--1 a-heading--semibold">Promotional heading</h2>
<p class="a-heading a-heading--3 a-heading--light">Promotional descriptive content.</p>
<ul class="m-button-group">
<li class="m-button-group__item">
<a href="#" class="a-button a-button--secondary">
button 1
</a>
</li>
<li class="m-button-group__item">
<a href="#" class="a-button a-button--primary">
button 2
</a>
</li>
</ul>
</div>
</div>
</div>50:50 split with CTA
Interactive example
Code example
<ul class="a-list-plain m-card-split-promo">
<li class="m-card m-card-split-promo__item t-accent-dark t-accent-dark--7">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--2 a-heading--semibold">Promotional heading</h2>
<p class="a-heading a-heading--3 a-heading--light">Promotional descriptive content.</p>
<ul class="m-button-group">
<li class="m-button-group__item">
<a href="#" class="a-button a-button--secondary">
button 1
</a>
</li>
<li class="m-button-group__item">
<a href="#" class="a-button a-button--primary">
button 2
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="m-card m-card-split-promo__item t-accent-dark t-accent-dark--8">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--2 a-heading--semibold">Promotional heading</h2>
<p class="a-heading a-heading--3 a-heading--light">Promotional descriptive content.</p>
<ul class="m-button-group">
<li class="m-button-group__item">
<a href="#" class="a-button a-button--secondary">
button 1
</a>
</li>
<li class="m-button-group__item">
<a href="#" class="a-button a-button--primary">
button 2
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>Development and test
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 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 promo card | Yes | .m-card |
|
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.
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.5.0 (23/03/21)
Latest update:
- updated: Alternative markup has been created to allow cards to be better linked semantically and to prevent failure of WCAG 1.3.1. These changes are currently optional, but although the old code will continue to work for Framework v5, it has been deprecated and will be removed from v6.