Summary card

[christopherthomasdesign]

Summary card is a variant of summary list contributed by @paulrobertlloyd. It's been approved by the working group and is ready for a final review. As well as adding new guidance and examples to the summary list page, it includes some new guidance on the 'check answers' pattern.

See Frontend code at alphagov/govuk-frontend#2931

See more discussion at alphagov/govuk-design-system-backlog#210

[netlify]

✅ You can preview this change here:

Name	Link
🔨 Latest commit	91eb497
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-design-system-preview/deploys/63d90cf359b5930008c67323
😎 Deploy Preview	https://deploy-preview-2251--govuk-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[paulrobertlloyd]

Removing the guidance around ‘header-less’ summary cards definitely makes this easier to understand. Possibly just need to review what examples we give for when to use a summary card. Can’t be exhaustive, of course, but should we provide a few examples? Rather than ‘applications’, I’ve suggested:

• interview appointments
• application choices

But I’m sure there are others we could add.

[calvin-lau-sig7]

I've made a commit with guidance edits to:

• explain the key-value concept using 'characteristics' instead of the more general 'information'
• explain use case for summary cards as a set of lists that 'repeats the same set of key labels', instead of the more general 'of the same type'
• add sentence to say that Summary cards are often used in case working system, explain why, and that this might be appropriate in public-facing services

Please do comment on anything that doesn't make sense — usually I'd use suggestions to do this but GitHub wouldn't let me touch any lines outside of the PR.

Rather than ‘applications’, I’ve suggested:

• interview appointments
• application choices

So I've got this down as "a set of people or professional qualifications" to match the examples we've currently got on the page, mainly to keep it simple and avoid bringing up new questions. Do we think this gives enough context for the "Use summary cards when you need to show" bullet point?

[paulrobertlloyd]

Love the revised description of what a summary list is, just one comment on the recommendation on when to use a summary card.

[paulrobertlloyd]

Not sure about this line (‘However…’), seems pretty vague. I’m not sure the distinction is a public-facing service versus a case working system but more to do with the overall amount and/or complexity of the information being gathered.

Might this guidance be better suited to suggest that summary cards may not be appropriate for simple transactional services for which there is a single journey, or something along those lines? Or maybe this second line isn’t needed at all?

[calvin-lau-sig7]

Suggested change

However, summary cards may not always be appropriate for public-facing services as users might not easily understand the information the summary card is meant to show.

Thanks Paul, good to hear this edit's on the right track!

I'd say let's remove the 'however' sentence — was trying to write something to discourage overuse, but does look like it'll quite work here.

[calvin-lau-sig7]

I've committed a new draft of the guidance. Summary of changes:

• moved the more detailed explanation of what a summary line is (introducing the concepts of characteristics and key-value pairs) into “How it works” — this bit seemed to be explaining the way the classes are named but of limited use elsewhere in the guidance
• changed the explanation of the use case for Summary cards — so instead of saying something about a set of summary lists that “repeat the same key labels” (a more technical definition), it now talks about summary lists that “describe the same type of thing”
• Added draft guidance for naming card actions as verb+noun

Also with @davidc-gds**

• Add more explanation of row actions for assistive tech users
• Add warning to remove row borders
• Finalise list of example card actions

[owenatgov]

💳