Promo cards are to used to highlight promotional offers
- Please restrict promotional heading and descriptive content to 2 lines in largest desktop view (copy may wrap onto more lines in smaller viewports). Ensure offer heading and description copy are understandable within those constraints.
- Built to work on light and dark accent colours.
For documentation on promo cards prior to v.1.0.4 see our deprecated promo cards documentation.
If you are using v.1.0.4 or above please move to using this version of the promo cards as soon as possible, or, if using promo cards with an image, please use the new editorial cards instead.
Notes for developers
Ensure that there is sufficient text within the anchor tag to be understandable where the link is going when read on its own.
Notes for testers
Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard
Use a screen reader to confirm that the links are understandable as to where they will be going when listed out of context of the page
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 text 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.
<div class="l-columns__column m-card m-card--full-bleed-promo [ Modifiers ]"> <div class="m-card-content"> <div class="m-card-content__inner m-card-content__inner--top"> <h2 class="heading heading--1">....</h2> </div> <div class="m-card-content__inner m-card-content__inner--bottom"> <h3>....</h3> <p><a href="...">....</a></p> </div> </div> </div>
The following table gives you a quick overview of the CSS classes that can be applied.
||Base style for card||Yes||
||Modifier for promo card||Yes||
||Base style for the text section of card||Yes||
||Base style for text section of card used to ensure elements align correctly||Yes||