- Taxonomic name: M-CARD--NEWS
- Added on: v4.9.0 (24/05/19)
- Updated on: v5.6.0 (20/04/21)
News, category and icon cards
Design and usage
Structure
- Icon size is 24px square (icons are centred within)
- Icon sits to the left of the copy
- Spacing between the icon and the copy is 5px
- Spacing above and below the icon and copy is 15px
- When you have a group of news icons the spacing in-between is 10px
- Can use a maximum of 3 different icon rows (if a project wants to use more they must have a definite need)
- Note: When using long copy with the icon, don't exceed two lines
Placement
- Always sits directly below the card title
Use cases and exception scenarios
- Don't use with: Download cards, Review cards, Numeric cards and Promo cards
Examples
Interactive example
Code example
<ul class="a-list-unordered a-list-news">
<li class="a-list-news__item--author">...</li>
<li class="a-list-news__item--calendar">...</li>
<li class="a-list-news__item--clock">...</li>
<li class="a-list-news__item--duration">...</li>
<li class="a-list-news__item--location">...</li>
<li class="a-list-news__item--view">...</li>
</ul>Development and test
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 |
|
.a-list-news |
Base style for news icon list | Yes | .a-list-unordered |
|
.a-list-news__item--author |
List element icon styling | .a-list-news > li |
||
.a-list-news__item--calendar |
List element icon styling | .a-list-news > li |
||
.a-list-news__item--clock |
List element icon styling | .a-list-news > li |
||
.a-list-news__item--duration |
List element icon styling | .a-list-news > li |
||
.a-list-news__item--location |
List element icon styling | .a-list-news > li |
||
.a-list-news__item--view |
List element icon styling | .a-list-news > li |
Component releases
- Added on: v4.9.0 (24/05/19)
- 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.