- Taxonomic name: M-CARD
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.10.0 (10/08/21)
Cards
A card is container which is defined by its contents, which can be almost anything from our component library. On this page are basic examples of editorial cards, which house text content which may or may not contain calls to action, but where the whole card does not act as a link.
Design and usage
- Editorial cards are built to work on light and dark accent colours.
- A maximum of four cards can be placed alongside each other in a desktop view, two 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.
- Do not use hyperlinks in headings within the card, instead use a call to action or link the whole card. See navigation cards for more information.
Examples
Plain card
Interactive example
Code example
<ul class="a-list-plain l-columns [ Modifiers ]">
<li class="l-columns__column m-card [ Modifiers ]">
<div class="m-card-image">
<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>
</div>
<div class="m-card-content">
<div class="m-card-content__inner">
<p class="m-card-tagline">...</p>
<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
<p>...</p>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<p class="m-card-readmore"><a class="a-button a-button--tertiary a-button--tertiary-shallow" href="..."><span class="a-button__inner">...<span class="u-hidden--visually">...</span></span></a></p>
</div>
</div>
</li>
... -- or -- <li class="l-columns__column m-card [ Modifiers ]">
<div class="m-card-content">
<div class="m-card-content__inner">
<p class="m-card-tagline">...</p>
<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
<p>...</p>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<a class="a-button a-button--tertiary a-button--tertiary-shallow"><span class="a-button__inner">...<span class="u-hidden--visually"></span>...</span></a>
</div>
</div>
</li>
...
</ul>
With 16:9 image
Interactive example
Code example
<ul class="a-list-plain l-columns [ Modifiers ]">
<li class="l-columns__column m-card [ Modifiers ]">
<div class="m-card-image">
<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>
</div>
<div class="m-card-content">
<div class="m-card-content__inner">
<p class="m-card-tagline">...</p>
<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
<p>...</p>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<p class="m-card-readmore"><a class="a-button a-button--tertiary a-button--tertiary-shallow" href="..."><span class="a-button__inner">...<span class="u-hidden--visually">...</span></span></a></p>
</div>
</div>
</li>
... -- or -- <li class="l-columns__column m-card [ Modifiers ]">
<div class="m-card-image">
<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>
</div>
<div class="m-card-content">
<div class="m-card-content__inner">
<p class="m-card-tagline">...</p>
<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
<p>...</p>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<a class="a-button a-button--tertiary a-button--tertiary-shallow"><span class="a-button__inner">...<span class="u-hidden--visually"></span>...</span></a>
</div>
</div>
</li>
...
</ul>
Full-bleed and accent colour image cards
Interactive example
Code example
<ul class="a-list-plain l-columns [ Modifiers ]">
<li class="l-columns__column m-card m-card-full-bleed [ Modifiers ] t-accent-dark" href="..." data-module="u-objectfit">
<div class="m-card-image">
<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>
</div>
<div class="m-card-content [ Modifiers ]">
<div class="m-card-content__inner">
<p class="m-card-tagline">...</p>
<h2 class="a-heading a-heading--1 a-heading--semibold">...</h2>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<p class="m-card-readmore"><a class="a-button a-button--tertiary a-button--tertiary-shallow" href="..."><span class="a-button__inner">...<span class="u-hidden--visually"></span>...</span></a></p>
</div>
</div>
</li>
...
</ul>
With 1:1 image
Interactive example
Code example
<ul class="a-list-plain l-columns [ Modifiers ]">
<li class="l-columns__column m-card [ Modifiers ]">
<div class="m-card-image m-card-image--1x1">
<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>
</div>
<div class="m-card-content">
<div class="m-card-content__inner">
<p class="m-card-tagline">...</p>
<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
<p>...</p>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<p class="m-card-readmore"><a class="a-button a-button--tertiary a-button--tertiary-shallow" href="..."><span class="a-button__inner">...<span class="u-hidden--visually">...</span></span></a></p>
</div>
</div>
</li>
... -- or -- <li class="l-columns__column m-card [ Modifiers ]">
<div class="m-card-image m-card-image--1x1">
<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>
</div>
<div class="m-card-content">
<div class="m-card-content__inner">
<p class="m-card-tagline">...</p>
<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
<p>...</p>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<a class="a-button a-button--tertiary a-button--tertiary-shallow"><span class="a-button__inner">...<span class="u-hidden--visually"></span>...</span></a>
</div>
</div>
</li>
...
</ul>
1:1 50/50 cards
Interactive example
Code example
<ul class="a-list-plain l-columns [ Modifiers ]">
<li class="l-columns__column m-card m-card--image-left m-card--50 [ Modifiers ]">
<div class="m-card-image m-card-image--1x1" data-module="u-objectfit">
<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>
</div>
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
<p>...</p>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<p class="m-card-readmore"><a class="a-button a-button--tertiary a-button--tertiary-shallow" href="..."><span class="a-button__inner">...<span class="u-hidden--visually"></span>...</span></a></p>
</div>
</div>
</li>
...
</ul>
16:9 50/50 full width card
Interactive example
Code example
<ul class="a-list-plain l-columns [ Modifiers ]">
<li class="l-columns__column m-card m-card--image-left m-card--50 [ Modifiers ]">
<div class="m-card-image m-card-image--16x9" data-module="u-objectfit">
<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>
</div>
<div class="m-card-content">
<div class="m-card-content__inner">
<p class="m-card-tagline">...</p>
<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<p class="m-card-readmore"><a class="a-button a-button--tertiary a-button--tertiary-shallow" href="..."><span class="a-button__inner">...<span class="u-hidden--visually"></span>...</span></a></p>
</div>
</div>
</li>
...
</ul>
9:16 cards
Interactive example
Code example
<ul class="a-list-plain l-columns [ Modifiers ]">
<li class="l-columns__column m-card m-card--image-left m-card--33 [ Modifiers ]">
<div class="m-card-image m-card-image--9x16" data-module="u-objectfit">
<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>
</div>
<div class="m-card-content">
<div class="m-card-content__inner">
<p class="m-card-tagline">...</p>
<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
<p class="m-card-readmore"><a class="a-button a-button--tertiary a-button--tertiary-shallow" href="..."><span class="a-button__inner">...</span></a></p>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<p class="m-card-tagline">...</p>
</div>
</div>
</li>
...
</ul>
Video Cards
Interactive example
Code example
<ul class="a-list-plain l-columns [ Modifiers ]">
<li class="l-columns__column m-card [ Modifiers ]" href="...">
<div class="m-card-image">
<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>
<div class="m-card-image__play"></div>
<div class="m-card-image__duration"><p>...</p></div>
</div>
<div class="m-card-content">
<div class="m-card-content__inner">
<p class="m-card-tagline">...</p>
<p">...</p>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<p class="m-card-readmore"><a class="a-button a-button--tertiary a-button--tertiary-shallow" href="..."><span class="a-button__inner">...<span class="u-hidden--visually"></span>...</span></a></p>
</div>
</div>
</li>
...
</ul>
Optional white card with border on white background
See tertiary cards for more information.
Development and test
Notes for developers
While cards can by created using individual div
elements, it is recommended that sets of cards be contained as list items within a ul
element in order to retain a link between them and to assist users taking advantage of screenreaders.
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.
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 |
div div.l-columns__column
|
|
.m-card--double |
Additional style for a double-width column | .m-card |
||
.m-card--image-left |
Additional style for positioning the image to the left/right | .m-card |
||
.m-card--50 |
Additional style for full width 50/50 split left/right image positioning | .m-card |
data-module="u-objectfit" required on image block for IE rendering |
|
.m-card--33 |
Additional positioning style for 33/67 width split left/right in conjunction with .m-card-image--9x16 |
.m-card |
data-module="u-objectfit" required on image block for IE rendering |
|
.m-card-full-bleed |
Base style for full-bleed image cards | .m-card |
Also add t-accent-dark class to same .m-card element to ensure font colour properties etc behave as expected | |
.m-card-full-bleed--left |
Additional style to move focus point of image to left | .m-card-full-bleed |
||
.m-card-full-bleed--right |
Additional style to move focus point of image to right | .m-card-full-bleed |
||
.m-card-full-bleed--no-content-bg |
remove background on .m-card-content | .m-card-full-bleed |
does not affect .m-card-link hover | |
.m-card-image |
Base style for the image section of the card | .m-card > div |
||
.m-card-image--16x9 |
Additional style for image at 16:9 aspect ratio | .m-card-image |
||
.m-card-image--9x16 |
Additional 9:16 ratio style to be used in conjunction with .m-card--33 |
.m-card-image |
||
.m-card-image--1x1 |
Additional style for image at 1:1 aspect ratio | .m-card-image |
||
.m-card-image--icon |
Additional style for icon used as card image | .m-card-image |
||
.m-card-content |
Base style for the text section of card | Yes | .m-card > div |
|
.m-card-content--centred |
Additional style to horizontally centre content within card | .m-card-content |
||
.m-card-content--middle |
Additional style to vertically centre content within card | .m-card-content |
||
.m-card-content__inner |
Wrapper class for the main part of the card content section | Yes | .m-card-content > div |
|
.m-card-content__inner m-card-content__inner--bottom |
Wrapper class to force last part of the card content section to anchor to the base of the content area | .m-card-content > div:last-child |
||
.m-card-tagline |
Spaced and capitalised supporting text for dateline/category/byline | .m-card-content p |
||
.m-card-readmore |
Supporting 'read more' link text | .m-card-content p |
Add tertiary link inside this tag to ensure this element performs visually as a standard link |
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 page.
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.10.0 (10/08/21)
Latest update:
- fixed: Spacing issues corrected where margin removal rules were not sufficiently specific.