Taxonomic name: M-CARD--REPORT
v.4.0.0 - Updated 20/07/18. Archives
Report cards are used to link to annual reports or other important corporate documents where the whole card acts as a link. They may be used individually, in groups or as double width feature cards with a 9x16 image.
- 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.
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.
This component forms part of the 'cards-extended' extension and so requires additional stylesheets to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheets:
<!--[if !IE | gt IE 8]><!--> <link media="all" href="[ CDN Folder Path ]/css/customer/cards-extended.css" rel="stylesheet" /> <!--<![endif]--> <!--[if lte IE 8]> <link media="all" href="[ CDN Folder Path ]/css/customer/cards-extended-unmq.css" rel="stylesheet" /> <![endif]-->
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.
<a class="l-columns__column m-card m-card--report [ Modifiers ]" href="..."> <div class="m-card-content"> <div class="m-card-content__inner m-card-content__inner--top"> <p class="m-card-tagline">...</p> <h2 class="a-heading a-heading--1 a-heading--semibold">...</h2> <h3 class="a-heading a-heading--3 a-heading--light">...</h3> </div> </div> </a>
The following table gives you a quick overview of the CSS classes that can be applied.
||Base style for card||Yes||
||Base style for report card||Yes||
||Additional style for a double-width column||
||Required for feature card|
||Base style for the image section of the card||
||Required for feature card|
||Base style for the text section of card||Yes||
||Base style for text section of card used to ensure elements align correctly||Yes||
||Additional style used to ensure elements align correctly to top of card||Yes||
||Spaced and capitalised supporting text for dateline/category/byline||