- Taxonomic name: M-CARD--REPORT
- Extension: CARDS-EXTENDED
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.6.0 (20/04/21)
Report cards
Report cards are used to link to annual reports or other important corporate documents where the whole card acts as a link.
Design and usage
- Report 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.
Examples
Interactive example
Code example
<a class="m-card m-card--link m-card--report [ Modifiers ]" href="...">
<div class="m-card-content">
<div class="m-card-content__inner">
<p class="m-card-tagline">...</p>
<div class="m-card-flex">
<h2 class="m-card-flex__left a-heading a-heading--1 a-heading--semibold">...</h2>
<h3 class="m-card-flex__right a-heading a-heading--3 a-heading--light">...</h3>
</div>
</div>
</div>
</a>Development and test
Notes for developers
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.
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--report |
Base style for report card | Yes | .m-card |
|
.m-card-flex |
Base style for text section of card used to ensure elements align correctly | Yes | .m-card-content |
|
.m-card-flex__left"> |
Additional style used to ensure elements align correctly to left of card | .m-card-flex > h2 |
||
.m-card-flex__right |
Additional style used to ensure elements align correctly to right of card | .m-card-flex > h3 |
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.