Panels of structured content (eg. image, title, description, link), typically organised in rows or grids:
Example 1: Home Office
Example 2: HMRC Tax Platform
Example 3: GOV.UK Notify
Example 4: GOV.UK Home page
Versions of this pattern are already being used in various government services (see examples above).
HMRC have some evidence that adopting this pattern has improved the usability of their tax platform.
This specific component doesn't exist, but it's possible that it could be build from GOV.UK Frontend styles and the panel component.
This proposal was reviewed by a panel of designers from GDS, DVLA, HMRC, DWP and Home Office on 15 Feb 2018.
The panel agreed that the pattern should be included in the GOV.UK Design System with the following recommendations.
There were concerns that cards are often used to compensate for poor information hierarchy or content design.
Contributors to this pattern should establish what user needs the pattern is designed to meet and write appropriate guidance explaining when to use, and not to use, the pattern.
Cards are already being used in many government services, but quite inconsistently. When used appropriately, cards are a good way of chunking up related content, data and links. They can also be used to highlight content on a page.
A consistent style and structure for cards should be established. A number of variants should be provided, with guidance for their appropriate use.
Close attention should be paid to the accessibility of the pattern, in particular colour contrast and the affordance of links.
Component or pattern
Consider whether Cards should be developed as a new component, or as a pattern built from existing styes and components.
The text was updated successfully, but these errors were encountered:
I've put together a prototype of a configurable card. It has a few "slots" available for an image, text and action and the appearance can be changed by using modifier classes.
These modifiers can give the card a background and add padding, remove a border, make the whole card focusable, make cards the same height if have different content etc etc
@roblav commented on 20 Dec 2017
PTA Card - Submission to HMRC Design System
What is the user need?
Caption: Old PTA home page
Caption: Current PTA home page
1. For other services to use this pattern we need to provide some more flexible use cases for the card. It needs to support when there is only 1 link into a service
2. We need more ways to display different kinds of information in the main section of the card
3. We need a way to not have the main section clickable, but still have links
4. There are some general interaction issues with it
5. There’s a strong belief that all the links should have a visible underline
6. The consistent height of the cards is set by minimum height
7. The content on the main card link is contained in an anchor tag and all of it is read out by a screenreader
We have recently been testing a new 'hub' for our service which directs users to various sub services or actions. While I don't agree with creating portals, our users aren't the general public and have specific needs and services which they need to use. So, having individual searchable services is just not possible.
Our service, which allows people to view and repay money they owe to DWP, uses a version of a card. It's been tested extensively and, despite my initial reservations, has proved to be successful in guiding users through the service. It's been especially well received on mobile, which we understand will be the device of choice when interacting with the service.
@dommn – is the card as a whole clickable? if so, does it allow the users to select the text inside it?
We designed a card variation for a service that I am working on in DfE and it proved to be quite effective and prominent. I have taken inspirations from the card design provided by @dashouse and utilised the code from nhs card design.
Added few tweaks to our version of the card to fit for our needs. The code for this can be found here: