Summary card

[paulrobertlloyd]

What

Visually separate the display of multiple summary lists that sit alongside each other, and provide a means of performing an action (or actions) on the entire summary.

Why

The problem

On the Apply for teacher training service, we ask candidates to enter multiple items of information (eg their jobs, work experiences, qualifications, course choices). We then give candidates the opportunity to review their answers, not only after completing each section, but when reviewing their entire application.

We tried to display this information using existing components, but uncovered a number of different issues:

• Repeating the summary list component many times over on a page, separated with headers, made it difficult to easily identify individual entries. This problem was even more apparent when reviewing the entire application, as there were additional heading levels.

• We tried to display individual entries using a table, but given the amount of information needing to be shown, this presentation became too constraining, information inaccessible or poorly labelled, and didn’t work well on mobile.

• It also proved difficult to include action links that applied to individual summary lists, further decreasing the lack of overall clarity on a page.

Here’s an example of a review page featuring a series of jobs, using existing components:

And here’s the same page, but using the summary card component:

Proposed solution

The summary card is a component that wraps around a summary list (and potentially other content such as paragraphs or tables). It allows you to give a summary list a title, and associate actions with it.

When to use this component

Use the summary card component when you have multiple summaries that can be grouped thematically and appear alongside each other.

Also use it when you need to apply an action(s) to all the information shown in a summary list.

If you’re using this component at the end of an application process, you may want to show it when reviewing individual sections so that users are familiar with the pattern when they see it again at the end of their journey.

When not to use this component

If you need to show only a limited amount of related information, use the summary list component. Combine this with heading(s) if you need to introduce different summary lists.

How it works

The summary card component allows you to visually group related pieces of information that sit alongside other similarly grouped summaries. The content of a summary card will typically include a single summary list, but could display other content (for example a paragraph of text, multiple paragraphs, a table) instead.

Summary card with a title

If the information in each summary card can have a title, this should be shown in the summary card’s header. A title will typically use a unique name for the information shown – for example, the name of an organisation or title of a qualification.

Summary card with a title and actions

You can add actions to a summary card, like a ‘Delete’ link to let users delete a particular group of related content. If the change link in each summary list item takes users the same page, you can use a single change link in the header, instead.

A maximum of three actions is recommended.

For sighted users, the actions get their context from the heading they appear next to.

Assistive technology users, like those who use a screen reader, may hear the links out of context and not know what they do. To give more context, add visually hidden text to the links. This means a screen reader user will hear a meaningful action like ‘Delete choice: University of Bristol’ or ‘Withdraw choice: The University of Gloucestershire’.

Summary card without a title

Summary cards should have a title where possible, but can appear without one if circumstance dictate, for example, if a series of untitled summaries appear alongside other summaries that do have a title.

User research and accessibility testing

This pattern has been present on our service since it launched in September 2019, and has been part of user research journeys that have been tested before and since then. No issues have been found.

Our service also had a DAC audit in December 2019, and no issues where highlighted with this component (we follow a lot of the same underlying code conventions used in other design system components).

Anything else?

• The summary card component - Becoming a teacher design history

[edwardhorsford]

This is really great @paulrobertlloyd!

This need is quite common for some services. My own service has similar things, but not styled as nicely as yours.

I like the clear distinction between actions on the contents and actions on the entity itself. In my service you can go view the entity on another page - so we'd likely not have actions on individual items and just use this to show the data.

Some examples from my service:

Showing addresses:

Showing contacts:

Showing products:

[paulrobertlloyd]

@edwardhorsford suggested I make this component available on Glitch so people can try it out and see how it’s put together. That’s a super idea, so I’ve done just that! https://govuk-summary-card.glitch.me

[timpaul]

Hi @paulrobertlloyd - thanks again for sharing this idea - we'd like to bring this proposal to our working group in 2 weeks time if possible. Would you be up for a quick chat about it before then though?

[edwardhorsford]

Just a note that I've adopted this for a service I'm working on (I'm working in the same area as @paulrobertlloyd now).

I really like this pattern. It's helpful for grouping related information, giving a bit more hierarchy to the page, and to anchor actions that are relevant to a card (deleting a section, etc).

Some screenshots of how I'm using it (many of these designs are stolen from Paul's project Apply to be a teacher):

As part of a confirm page after the task list:

At the end of a section in the task list:

In a page giving all details for this record:

I'd love to see it "officially" supported.

[a184studio]

Some interesting things in here to take away. I can see the benefit in breaking out in to sections. We do this at present with headers and space top and bottom but minus the boarder.

When it comes to say, adding a thing I think there might be some real value in here for us.
Eg, You might have entered someone twice. So I need to remove x4 rows of content at once. Their name, education etc etc.
So having them as cards or modules would save some effort on the the citizens side.

I would say the use case above for us should be really rare as we have a mini CYA after each person has been added.
(https://design.tax.service.gov.uk/hmrc-design-patterns/add-to-a-list/)

I think what this does highlight is the benefit around adding/changing/removing a whole block.
We sometimes struggle with, One Change link vs a change for each data item.
In some scenarios to change one thing we need to push you down a whole mini journey. Changing a yes/no answer within a group is sometimes not that simple.

I would assume that this is to be used by both citizen and internal.
We [DWP] have issues with agents and Light-grey on their windows '95 monitors. Basically it just doesn't show up.
So the loss of contract from card headers and can case elements to be lost.
Thats not to say that this would be all users. But just to bear in mind that that grey is of low contrast.

I'd be happy to give this a shot with Pension Credit when I get some down time to implement a testing version.

[timpaul]

In October 2020 the Design System Working group reviewed and approved this proposal.

The group voted 5 to 4 to add the proposal as an extension of the existing summary list component, rather than as a new general-purpose component.

A general-purpose component would be more versatile, but we don't yet have enough evidence that there is a need to support other use cases.

However we will review this decision periodically, in case new examples come to light.

The group also made the following recommendations:

• to allow users to override the summary list contents in the macro, so less common use cases could be handled as well

• to clearly explain to users when this variant should be used, and when to use something else, like a table, tabs or a standard summary list

• to consider making card titles bold, so that they are easier to spot

• to allow users to style and modify the card titles - for example, to make them bold, or to add sub-headings

• to ensure that the design doesn't rely on users perceiving the grey title background, which may appear white on older monitors or over VNC

• to consider the case where the end user may need to edit the title text of a card - how would they do this?

• to make the styling of multiple action links in the cart title consistent with that of of the standard summary list

[fofr]

I've started to use this pattern on a new service and wondered if there's been progress on implementing the pattern since October 2020?

[lfdebrux]

Hi @fofr, sorry for the late reply.

The status of the Summary card contribution hasn’t changed since the working group review last year (see @timpaul’s message above): currently the summary card is not on our list of priorities for this quarter, so we’re not expecting any work to happen on this component in the next month, but it is something we would like to do soon.

When we do start work on it we will try and update this backlog entry to keep you and others updated.

[CByrom]

I started to use this component on a new service in HMRC and it made a huge difference to our users' level of understanding of something that's quite complex. We'd tried using tables and summary lists, but the summary card helped us to separate details of each item out into a much clearer format. We did end up creating a footer to contain some links rather than having them in the header, for business reasons, but we've kept to the basic principles of the component apart from that. Our UR results became much more positive the instant we adopted the pattern - we'd be happy to share them when you start working on the component.

[paulrobertlloyd]

@CByrom That’s so lovely to hear! Could you share an example of a card with a footer?

[CByrom]

@paulrobertlloyd Here you go:

[calvin-lau-sig7]

Working group review of 'Summary Card'

In July and August 2022, the Design System working group reviewed the ‘Summary card’ as a new part of the ‘Summary list’ component.

They approved the new addition as usable, consistent and versatile, but shared a few recommendations and concerns.

The working group commented that summary cards:

• can be used well, particularly in services that involve account management
• can easily be misused — resulting in long, endlessly scrolling pages
• might not be the best solution in many situations, information could be better organised instead
• might only be suitable for deeply complex, specialist services
• might be a part of a larger ‘less essential’ group of components and patterns that should be separated from the rest of the Design System
• looks and feels similar to the ‘Check your answers’ component — but their designs are slightly inconsistent

To add summary cards to the Design System, the working group recommends:

• to write clearer guidance on when and how to use them
• to include more examples, specifically to show how the group actions work
• to consider if the ‘no titles’ option is needed, as the use case is not clear
• to align the design more with the ‘Check your answers’ component
• to add guidance to explain the differences and use cases with the ‘Check your answers’ component

Based on the working group’s recommendations, the Design System team will:

• improve guidance on when and how to use summary cards
• to consider if the ‘no titles’ option is needed, or make its use case clearer
• add guidance about the ‘Check your answers’ component
• add more examples, from a wider number of services, to better show how summary cards work

Help us get this contribution ready to publish

To apply the working group’s recommendations, we need to collect more use cases and examples of summary cards in services. If you’d like to help, leave a comment in this issue.

[paulrobertlloyd]

On DLUHC’s Submit social housing lettings and sales data service, the summary card is used to help users check their answers on a section that asks for details of a lead tenant and any other occupants of a property:

Of note:

• The ‘title-less’ variant of the card is used to present the answers to the first 2 questions in the flow. This is to ensure that these answers align with those below, and also visually separates these 2 questions from the other summary cards on this page.
• To add or remove occupants, you change the answer to ‘Number of people in the household’. A better approach might be to not ask this question at all, and instead imply this value from the number of occupants entered. However, details don’t have to be given for each individual, so this approach was felt to be clearer. However, were this not the case, a ‘Remove occupant’ action link could be added to the header of each occupant card to allow users to remove individual occupants.

[paulrobertlloyd]

The summary card pattern is used extensively on HMPPS’s Manage supervisions service.

I am posting a quick overview of their usage on this service in lieu of @fofr providing any further reasoning for choosing this pattern or any other useful details.

Overview

Summary cards are used on a complex overview page. From the relevant design history entry, the design of this page sought to:

provide a means of way-finding by showing the most important details, and linking to where related details live within the service, for example name and circumstances with a link to personal details for more.

It’s worth noting that other information may also appear on this page, such as notification banners, making it more likely that clearer delineation between different parts of the page is needed:

The design history entry also shows an earlier design where headings were used above individual summary lists, leading to a page that, to my eye, is harder to navigate and parse.

Risk

Summary cards are also used when summarising risks. Multiple risks may be shown on the same page, each linking to a further OASys detail page. This usage demonstrates the summary card pattern being used to display multiple instances of a thing on the same page:

Appointments

Summary cards are also used in other aspects of the service, such as for summarising appointment details:

This usage could arguably be served by the existing summary list pattern, so is more likely a subjective, stylistic choice.

[chris-barrett-ddts]

Adding a couple of examples where a similar pattern is used on the Water Resources Licensing Service to group data.

This is a view from the part of the service used by Environment Officers, they use it as part of setting up the licence.

In this case when setting up what returns are required on a licence. We use this pattern to group together a section of data relating to a return that his required on a licence.

We've also experimented using it to display contacts for a customer, the contacts can be linked to individual licences.

[calvin-lau-sig7]

On 31 January 2023, we released the Summary card as a new variant within the Summary list component.

See the release notes for GOV.‌UK Frontend v4.5.0 to find out more.

[CharlotteDowns]

We ran an external accessibility audit for some of the components and patterns in GOV.UK Frontend in May 2023. In that audit, we included an example of the Summary list (card) component. We’re adding results from that audit here so that we can:

• document, discuss and address the findings
• inform future contributors of the findings

Two accessibility issues raised

Issue 1: WCAG A

Delete work history' isn't specifying for which card it applies

The ‘Delete work history’ links for each section, rely on surrounding content to understand their context and which work they will be deleting. As the link is not marked up in the same list item, table cell, or using different methods of aria, the link requires a user to move their focus to understand which work history they will be deleting.

More detail in this issue:

• #3673

Issue 2: WCAG A

'Change [row heading]' link doesn't give full context for the summary card it applies to

The ‘change’ links have been provided with additional link text to inform users of screen reading assistive technologies that they relate to the different questions i.e., ‘job title’. However, additional context is required to understand their whole purpose as to which section and work they relate to. For example, a user would need to navigate backwards to locate the heading to which they are sectioned under, and as there are multiple ‘change job title’ links, this can be confusing for users.

More detail in this issue:

• #3674