Summary

A summary summarises instructions, tasks, or benefits in a list.

Summary
When to use

Use a summary:

  • when you need to show a list of instructions, tasks or benefits

Don't use a summaryr:

  • if you need to give users positive or negative instructions (use instruction instead)

Types

Adding a status is optional. There are 3 status types you can add.

Type

Icon

Usage

Done

Use this to indicate that a task is complete.

Pending

Use this to indicate that a task is in progress.

Not done

No icon

If an item is not done, it's indicated by the lack of an icon. The content should already clearly communicate what the user needs to do.

To help those using screenreaders, you can add a ‘not done’ aria label.

Best practice
  • Keep the same structure for all the summaries in a list — start all titles with verbs, or all with nouns, but don’t mix and match.
  • Don't use more than 6 summaries in a list — any more and it gets hard to scan and difficult to take in information.
  • Don’t use the info button for critical information as users might not click on it.
  • Don't use an info button for too many items in a list — try to stick to one per list at the most.
  • Use a status when you need to show the user the status of an action.
  • Use a description if you need to expand on the information in the title, and surface important information on the screen.
  • Include an action if you need to redirect the user to a related, secondary task — for example, to give the user an opportunity to amend a previous action, like editing an address they’ve already confirmed.

Interaction

The only interactive parts of the summary are the info button and the action.

Info button

Clicking or tapping the info button shows the user some additional information or educational content.

On web, this triggers either a popover or a modal. Use popovers for short definitions or brief bits of additional info, and modals for richer content.

On mobile, interacting with the info button should open a bottom sheet or a full screen modal.

Action

The action lets users navigate to a secondary task.

Accessibility

Be mindful of how frequently you use the info button — too many info buttons add visual noise to the screen, increasing the cognitive load.

You can use an optional status to indicate the state of items that require action — this will add an appropriate aria label for screenreader users, and for some statuses, an icon.

If you do choose to use a status, don't rely on the aria label or icon alone to communicate it. Make sure this information is clear from the title, too. For example:

  • 'Verify your address' would match a not done status

  • 'We’re verifying your address' would match a pending status

  • 'Your address is verified' would match a done status

Statuses are optional as not all summary items are actionable — but if you use a status for one item, you should use a status for all items.

Content

Title

Title copy should:

  • sum up a single piece of information the user needs to know

  • make the status obvious (if there is one)

  • be short — aim for 6 words or less

  • use sentence case

  • have no full stop

A summary with a short and succinct title.
A summary with a long title.
Four summary items with consistent titles.

Consistent titles

Four summary items with inconsistent titles.

Inconsistent titles

Description (optional)

Description copy should:

  • expand on the title by providing important, related information

  • be plain text — that means no bold, links, or other fancy formatting

  • be short — aim for 2 lines and remember content might expand when translated

  • use sentence case

  • include a full stop

A summary with a short and succinct description.
A summary with a very long description.
Three summary items with consistent descriptions.

Consistent descriptions

Three summary items, but with inconsistent descriptions.

Inconsistent descriptions

Action (optional)

Action copy should:

  • direct users to an optional, but directly-related secondary task

  • start with a verb

  • be 1-3 words

  • use sentence case

  • have no full stop

A summary with a short action.
A summary with very long action text.
Availability

Platform

Available

Developer documentation

Android

iOS

Web

Web documentation