- Taxonomic name: M-CARD--ICON
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.6.0 (20/04/21)
Icon cards
Icon cards are defined as those with an icon, a heading and a call to action, but where the whole card does not act as a link.
Design and usage
- Built to work on light and dark accent background colours.
Examples
Interactive example
Code example
<li class="m-card m-card--icon [ Modifiers ]">
<div class="m-card-image m-card-image--icon">
<img src="..." decoding="async" width="..." height="..." alt="" />
</div>
<div class="m-card-content m-card-content--centred">
<div class="m-card-content__inner">
<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-content__inner m-card-content__inner--bottom 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>
</li>Optional white card on white background
See tertiary cards for more information.
Optional icon sizes - n1, n2 and n3
Development and test
Notes for developers
Ensure .t-accent-light accent colour type and .t-accent-light--1 colour options have both been specified for the card to guarantee the correct font colours within the card.
Lazy loading can be applied to the icons on the cards. 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 |
aa.l-columns__columndivdiv.l-columns__column
|
|
.m-card--icon |
Base style for icon card | Yes | .l-columns-column |
|
.m-card-image--icon |
Additional style for icon used as card image | Yes | .m-card-image |
|
.m-card-image--n1 |
Force image height to 110px | .m-card-image |
||
.m-card-image--n2 |
Force image height to 75px | .m-card-image |
||
.m-card-image--n3 |
Force image height to 45px | .m-card-image |
||
.m-card-content--centred |
Additional style to horizontally centre content within card | Yes | .m-card-content |
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.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.