- Taxonomic name: M-CARD--TERTIARY
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.6.0 (20/04/21)
Tertiary cards
Les cartes tertiaires sont des cartes blanches avec une bordure grise à utiliser sur un fond gris clair ou blanc.
Design et usage
- A utiliser uniquement sur des fonds gris clair (#F9F9F9) et blancs (#FFF) blanc (#FFF).
- To be across three to 12 columns of the page.
Examples
Interactive example
Code example
Editorial card (no link / internal link)
<li class="m-card m-card--tertiary [ 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>
...
</div>
</div>
</li>
Link card (whole card link)
<li href="..." class="m-card m-card--link m-card--tertiary [ Modifiers ]">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--2 a-heading--semibold"><a class="m-card__link" href="..." aria-describedby="...">...</a></h2>
...
<p class="m-card-content__inner m-card-content__inner--bottom m-card-readmore" id="..." aria-hidden="true"><span>...</span></p>
</div>
</div>
</li>
Development and test
Notes for developers
These cards are a variant on the other card types. The only restrictions are that this variant should only be used on lightest grey (#F9F9F9) or white (#FFF) backgrounds.
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--tertiary |
Modifier style to add a border on to standard white cards on lightest grey (#F9F9F9) and white (#FFF) backgrounds | Yes | .m-card |
Component releases
- Added on: v3.0.0 (15/09/17)
- 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
pictureelement to improve page performance by allowing different sized images to be served for different screen sizes.