Why?
They’re used for items like guidance, news and search results to give an easily scannable list.
Usage
Cards consist of a heading and optional:
- heading icon
- summary
- metadata, including tags and dates.
Cards are usually used within an unstyled, unordered list (ul.list--unstyled).
Cards have a default margin bottom but this can be overridden by using the .card--flush modifier. Alternatively use the CSS spacing classes to override margins.
Variants
Cards can have a combination of headings, summary, image and metadata. So instead of distinct variants, here are some examples and use cases of cards.
Standard
Use a standard card layout for displaying things like guidance, advice, quality standards and shared learning in a list:
- show the id of published guidance in brackets after the title
- use the correct level of heading to maintain a correct document heading structure
- use tags in metadata to highlight important content
- show relevant dates with the correct label
- use a
timetag with the correctdatetimeattribute to display dates.
Example
Source
<ul class="list--unstyled">
<li>
<article class="card">
<header class="card__header">
<h3 class="card__heading">
<a href="https://www.nice.org.uk/guidance/csg1">
Improving outcomes in breast cancer (CSG1)
</a>
</h3>
</header>
<dl class="card__metadata">
<div class="card__metadatum">
<dt class="visually-hidden">Product type:</dt>
<dd>
Guidance
</dd>
</div>
<div class="card__metadatum">
<dt class="visually-hidden">Programme:</dt>
<dd>
Cancer service guideline
</dd>
</div>
<div class="card__metadatum">
<dt>Published date:</dt>
<dd>
<time datetime="2002-08-28">28 August 2002</time>
</dd>
</div>
</dl>
</article>
</li>
<li>
<article class="card">
<header class="card__header">
<h3 class="card__heading">
<a href="https://www.nice.org.uk/guidance/qs124">
Suspected cancer (QS124)
</a>
</h3>
</header>
<dl class="card__metadata">
<div class="card__metadatum">
<dt class="visually-hidden">Product type:</dt>
<dd>
Quality standard
</dd>
</div>
<div class="card__metadatum">
<dt>Last updated:</dt>
<dd>
<time datetime="2017-12-05">5 December 2017</time>
</dd>
</div>
<div class="card__metadatum">
<dt>Published date:</dt>
<dd>
<time datetime="2016-06-30">30 June 2016</time>
</dd>
</div>
</dl>
</article>
</li>
<li>
<article class="card">
<header class="card__header">
<h3 class="card__heading">
<a href="https://www.nice.org.uk/">
Breast cancer (advanced or metastatic) - lapatinib [ID20]
</a>
</h3>
</header>
<dl class="card__metadata">
<div class="card__metadatum">
<dt>
<span class="card__tag tag tag--consultation tag--flush">
In consultation
</span>
</dt>
<dd class="visually-hidden">Yes</dd>
</div>
<div class="card__metadatum">
<dt class="visually-hidden">Status:</dt>
<dd>
In development
</dd>
</div>
<div class="card__metadatum">
<dt class="visually-hidden">Programme:</dt>
<dd>
Technology appraisal guidance
</dd>
</div>
<div class="card__metadatum">
<dt>Published date:</dt>
<dd>
<time datetime="2017-01">January 2017</time>
</dd>
</div>
</dl>
</article>
</li>
<li>
<article class="card">
<header class="card__header">
<h3 class="card__heading">
<a href="https://www.nice.org.uk/sharedlearning/the-challenges-of-implementing-the-new-nice-guidance-for-suspected-cancer-recognition-and-referral">
Overcoming the challenges of implementing the new NICE guidance for suspected cancer: recognition and referral
</a>
</h3>
</header>
<dl class="card__metadata">
<div class="card__metadatum">
<dt class="visually-hidden">Product type:</dt>
<dd>
Shared learning
</dd>
</div>
<div class="card__metadatum">
<dt>Published date:</dt>
<dd>
<time datetime="2017-01-08">8 January 2017</time>
</dd>
</div>
</dl>
</article>
</li>
</ul>
With icon
Use an icon to distinuish items in a list. Follow the rules around icon usage.
Source
<article class="card">
<header class="card__header">
<h3 class="card__heading">
<a href="https://www.nice.org.uk/">
<span class="card__icon icon icon--pathways" aria-hidden="true"></span>
Advanced breast cancer: diagnosis and treatment
</a>
</h3>
</header>
<dl class="card__metadata">
<div class="card__metadatum">
<dt class="visually-hidden">Product type:</dt>
<dd>
Pathway
</dd>
</div>
</dl>
</article>
With summary and image
Use summary and images for things like news and blogs. Use a relevant alternative text attribute to properly describe the image. The image stacks above the text on small screen widths.
Example
NICE guidance can reduce delays in hospital discharge raised by critical report
NICE urges hospitals and local authorities to redouble their efforts to reduce delays in discharging patients from hospitals, following criticism from MPs.
Source
<article class="card">
<img class="card__image" src="//via.placeholder.com/200x200" alt="A good, relevant alternative description">
<div class="card__text">
<header class="card__header">
<h3 class="card__heading">
<a href="https://www.nice.org.uk/news/article/nice-guidance-can-reduce-delays-in-hospital-discharge-raised-by-critical-report">
NICE guidance can reduce delays in hospital discharge raised by critical report
</a>
</h3>
</header>
<p class="card__summary">
NICE urges hospitals and local authorities to redouble their efforts to reduce delays in discharging patients from hospitals, following criticism from MPs.
</p>
<dl class="card__metadata">
<div class="card__metadatum">
<dt>Date published:</dt>
<dd>
<time datetime="2016-07-22">22 July 2016</time>
</dd>
</div>
</dl>
</div>
</article>