From 304104846442e8e081aa323aa638e537f75ba9b6 Mon Sep 17 00:00:00 2001 From: Diogo Costa Date: Mon, 16 Mar 2026 12:59:29 +0000 Subject: [PATCH 01/23] feat(card): align toolkit card family with figma --- packages/site/views/_includes/_side-nav.njk | 30 +- .../content/a-to-z-of-nhs-health-writing.njk | 2 +- .../content/formatting-and-punctuation.njk | 2 +- .../components/card-callout/default/index.njk | 25 + .../components/card-callout/index.njk | 39 ++ .../card-callout/macro-options.json | 52 ++ .../components/card-do-dont/default/index.njk | 39 ++ .../components/card-do-dont/index.njk | 33 + .../card-do-dont/macro-options.json | 54 ++ .../card/basic-dismissible/index.njk | 10 + .../components/card/basic-success/index.njk | 11 + .../components/card/card-with-icon/index.njk | 15 +- .../card/clickable-action/index.njk | 32 + .../card/clickable-card-with-icon/index.njk | 26 +- .../card/clickable-numeric/index.njk | 10 + .../components/card/clickable/index.njk | 2 +- .../components/card/group-quarter/index.njk | 32 +- .../design-system/components/card/index.njk | 54 +- .../components/card/macro-options.json | 196 +++++- .../components/do-and-dont-lists/index.njk | 63 +- .../components/inset-text/index.njk | 2 +- .../components/warning-callout/index.njk | 75 +-- .../index.njk | 4 +- .../design-system/styles/icons/index.njk | 2 +- packages/site/views/examples.njk | 12 +- .../components/card-callout/index.njk | 24 + .../components/card-do-dont/index.njk | 56 ++ .../card/basic-dismissible-card.njk | 25 + .../components/card/basic-success-card.njk | 26 + .../components/card/clickable-action-card.njk | 47 ++ .../card/clickable-numeric-card.njk | 25 + packages/site/views/site-map.njk | 4 +- packages/site/views/sitemap.xml | 6 + .../toolkit/components/card-callout/README.md | 52 ++ .../card-callout/_card-callout.scss | 92 +++ .../toolkit/components/card-callout/macro.njk | 3 + .../components/card-callout/template.njk | 34 ++ .../toolkit/components/card-do-dont/README.md | 58 ++ .../card-do-dont/_card-do-dont.scss | 69 +++ .../toolkit/components/card-do-dont/macro.njk | 5 + .../components/card-do-dont/template.njk | 46 ++ packages/toolkit/components/card/README.md | 572 ++---------------- packages/toolkit/components/card/card.js | 34 +- packages/toolkit/components/card/card.scss | 191 ++++-- packages/toolkit/components/card/card.test.js | 85 +++ packages/toolkit/components/card/template.njk | 171 ++++-- .../toolkit/components/do-dont-list/README.md | 131 +--- .../do-dont-list/_do-dont-list.scss | 34 +- .../toolkit/components/do-dont-list/macro.njk | 17 +- .../components/do-dont-list/template.njk | 34 +- .../components/warning-callout/README.md | 76 +-- .../warning-callout/_warning-callout.scss | 21 +- .../components/warning-callout/macro.njk | 22 +- .../components/warning-callout/template.njk | 37 +- packages/toolkit/core/tools/_mixins.scss | 69 +++ packages/toolkit/ofh.scss | 2 + 56 files changed, 1840 insertions(+), 1050 deletions(-) create mode 100644 packages/site/views/design-system/components/card-callout/default/index.njk create mode 100644 packages/site/views/design-system/components/card-callout/index.njk create mode 100644 packages/site/views/design-system/components/card-callout/macro-options.json create mode 100644 packages/site/views/design-system/components/card-do-dont/default/index.njk create mode 100644 packages/site/views/design-system/components/card-do-dont/index.njk create mode 100644 packages/site/views/design-system/components/card-do-dont/macro-options.json create mode 100644 packages/site/views/design-system/components/card/basic-dismissible/index.njk create mode 100644 packages/site/views/design-system/components/card/basic-success/index.njk create mode 100644 packages/site/views/design-system/components/card/clickable-action/index.njk create mode 100644 packages/site/views/design-system/components/card/clickable-numeric/index.njk create mode 100644 packages/site/views/examples/components/card-callout/index.njk create mode 100644 packages/site/views/examples/components/card-do-dont/index.njk create mode 100644 packages/site/views/examples/components/card/basic-dismissible-card.njk create mode 100644 packages/site/views/examples/components/card/basic-success-card.njk create mode 100644 packages/site/views/examples/components/card/clickable-action-card.njk create mode 100644 packages/site/views/examples/components/card/clickable-numeric-card.njk create mode 100644 packages/toolkit/components/card-callout/README.md create mode 100644 packages/toolkit/components/card-callout/_card-callout.scss create mode 100644 packages/toolkit/components/card-callout/macro.njk create mode 100644 packages/toolkit/components/card-callout/template.njk create mode 100644 packages/toolkit/components/card-do-dont/README.md create mode 100644 packages/toolkit/components/card-do-dont/_card-do-dont.scss create mode 100644 packages/toolkit/components/card-do-dont/macro.njk create mode 100644 packages/toolkit/components/card-do-dont/template.njk create mode 100644 packages/toolkit/components/card/card.test.js diff --git a/packages/site/views/_includes/_side-nav.njk b/packages/site/views/_includes/_side-nav.njk index 79df31796..dc4cc3808 100644 --- a/packages/site/views/_includes/_side-nav.njk +++ b/packages/site/views/_includes/_side-nav.njk @@ -67,7 +67,6 @@ { title: "Action link", url: "/design-system/components/action-link" }, { title: "Back link", url: "/design-system/components/back-link" }, { title: "Breadcrumbs", url: "/design-system/components/breadcrumbs" }, - { title: "Card", url: "/design-system/components/card" }, { title: "Contents list", url: "/design-system/components/contents-list" }, { title: "Footer", url: "/design-system/components/footer" }, { title: "Header", url: "/design-system/components/header" }, @@ -76,31 +75,17 @@ { title: "Task list", url: "/design-system/components/task-list" } ] %} -{# Commenting out to preserve the original menu; one below removes 'Care cards' and 'Review date' -{% set contentPresentation = [ - { title: "Care cards", url: "/design-system/components/care-cards" }, - { title: "Details", url: "/design-system/components/details" }, - { title: "Do and Don't lists", url: "/design-system/components/do-and-dont-lists" }, - { title: "Expander", url: "/design-system/components/expander" }, - { title: "Images", url: "/design-system/components/images" }, - { title: "Inset text", url: "/design-system/components/inset-text" }, - { title: "Review date", url: "/design-system/components/review-date" }, - { title: "Summary list", url: "/design-system/components/summary-list" }, - { title: "Table", url: "/design-system/components/table" }, - { title: "Tag", url: "/design-system/components/tag" }, - { title: "Warning callout", url: "/design-system/components/warning-callout" } -] %} #} - {% set contentPresentation = [ + { title: "Card", url: "/design-system/components/card" }, + { title: "Card / Callout", url: "/design-system/components/card-callout" }, + { title: "Card / Do & Don’t", url: "/design-system/components/card-do-dont" }, { title: "Details", url: "/design-system/components/details" }, - { title: "Do and Don't lists", url: "/design-system/components/do-and-dont-lists" }, { title: "Expander", url: "/design-system/components/expander" }, { title: "Images", url: "/design-system/components/images" }, { title: "Inset text", url: "/design-system/components/inset-text" }, { title: "Summary list", url: "/design-system/components/summary-list" }, { title: "Table", url: "/design-system/components/table" }, - { title: "Tag", url: "/design-system/components/tag" }, - { title: "Warning callout", url: "/design-system/components/warning-callout" } + { title: "Tag", url: "/design-system/components/tag" } ] %} {% set formElements = [ @@ -119,13 +104,6 @@ { title: "Textarea", url: "/design-system/components/textarea" } ] %} -{# Old Patterns for Tasks and Page types #} -{# {% set askUsers = [ - { title: "Ask users for their NHS number", url: "/design-system/patterns/ask-users-for-their-nhs-number" }, - { title: "Help users decide when and where to get care (care cards)", url: "/design-system/patterns/help-users-decide-when-and-where-to-get-care" }, - { title: "Reassure users that a page is up to date", url: "/design-system/patterns/reassure-users-that-a-page-is-up-to-date" } -] %} #} - {% set pages = [ { title: "A to Z page", url: "/design-system/patterns/a-to-z-page" }, { title: "Mini-hub", url: "/design-system/patterns/mini-hub" }, diff --git a/packages/site/views/content/a-to-z-of-nhs-health-writing.njk b/packages/site/views/content/a-to-z-of-nhs-health-writing.njk index 3b69689e0..3fc1a404e 100644 --- a/packages/site/views/content/a-to-z-of-nhs-health-writing.njk +++ b/packages/site/views/content/a-to-z-of-nhs-health-writing.njk @@ -326,7 +326,7 @@

don't or do not

We use "do not" instead of "don't".

Read why in the contractions section.

-

We use "Don't" in headings for Do and Don't lists. But we use "do not" for the commands in the list.

+

We use "Don't" in headings for Card / Do & Don’t. But we use "do not" for the commands in the list.

dosage

See dosage on our Numbers, measurements, dates and time page.

drowsy

diff --git a/packages/site/views/content/formatting-and-punctuation.njk b/packages/site/views/content/formatting-and-punctuation.njk index 6e895049a..d2668fd5b 100644 --- a/packages/site/views/content/formatting-and-punctuation.njk +++ b/packages/site/views/content/formatting-and-punctuation.njk @@ -187,7 +187,7 @@

We use bullet points in:

Lists with a lead-in line

diff --git a/packages/site/views/design-system/components/card-callout/default/index.njk b/packages/site/views/design-system/components/card-callout/default/index.njk new file mode 100644 index 000000000..b22511897 --- /dev/null +++ b/packages/site/views/design-system/components/card-callout/default/index.njk @@ -0,0 +1,25 @@ +{% from 'card-callout/macro.njk' import cardCallout %} + +{{ cardCallout({ + "heading": "Information", + "variant": "info", + "html": "

This is additional context to help the user understand the next step.

" +}) }} + +{{ cardCallout({ + "heading": "Error", + "variant": "error", + "html": "

There is a problem with the information in this section.

" +}) }} + +{{ cardCallout({ + "heading": "Success", + "variant": "success", + "html": "

Your details have been saved successfully.

" +}) }} + +{{ cardCallout({ + "heading": "Warning", + "variant": "warning", + "html": "

Check this information before you continue.

" +}) }} diff --git a/packages/site/views/design-system/components/card-callout/index.njk b/packages/site/views/design-system/components/card-callout/index.njk new file mode 100644 index 000000000..d93769704 --- /dev/null +++ b/packages/site/views/design-system/components/card-callout/index.njk @@ -0,0 +1,39 @@ +{% set pageTitle = "Card / Callout" %} +{% set pageSection = "Design system" %} +{% set subSection = "Components" %} +{% set pageDescription = "Use Card / Callout to highlight contextual information such as informational, warning, success or error messages." %} +{% set theme = "Content presentation" %} +{% set dateUpdated = "March 2026" %} +{% set hideDescription = "true" %} + +{% extends "app-layout.njk" %} + +{% block breadcrumb %} + {% include "../_breadcrumb.njk" %} +{% endblock %} + +{% block bodyContent %} + + {{ designExample({ + group: "components", + item: "card-callout", + type: "default" + }) }} + +

When to use Card / Callout

+

Use Card / Callout to highlight short, self-contained contextual information that users need to notice while scanning a page.

+ +

Variants

+

Use the variant that matches the message:

+ + +

How to use Card / Callout

+

Keep the heading short and specific. The body should be concise enough that users can understand it quickly without needing surrounding context.

+

If the content is more instructional than contextual, consider whether Card / Do & Don’t or a standard Card is a better fit.

+ +{% endblock %} diff --git a/packages/site/views/design-system/components/card-callout/macro-options.json b/packages/site/views/design-system/components/card-callout/macro-options.json new file mode 100644 index 000000000..924ec7672 --- /dev/null +++ b/packages/site/views/design-system/components/card-callout/macro-options.json @@ -0,0 +1,52 @@ +{ + "params": [ + { + "name": "heading", + "type": "string", + "required": true, + "description": "Heading to use within the Card / Callout. Ignored if `headingHtml` is provided." + }, + { + "name": "headingHtml", + "type": "string", + "required": false, + "description": "HTML to use inside the heading." + }, + { + "name": "headingLevel", + "type": "integer", + "required": false, + "description": "Optional heading level. Default: 3." + }, + { + "name": "variant", + "type": "string", + "required": false, + "description": "Visual variant: `info`, `error`, `success` or `warning`. Default: `info`." + }, + { + "name": "html", + "type": "string", + "required": false, + "description": "HTML to use inside the callout body." + }, + { + "name": "text", + "type": "string", + "required": false, + "description": "Plain text to use inside the callout body." + }, + { + "name": "classes", + "type": "string", + "required": false, + "description": "Classes to add to the Card / Callout." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes to add to the Card / Callout." + } + ] +} diff --git a/packages/site/views/design-system/components/card-do-dont/default/index.njk b/packages/site/views/design-system/components/card-do-dont/default/index.njk new file mode 100644 index 000000000..373c45839 --- /dev/null +++ b/packages/site/views/design-system/components/card-do-dont/default/index.njk @@ -0,0 +1,39 @@ +{% from 'card-do-dont/macro.njk' import cardDoDont %} + +
+ {{ cardDoDont({ + "type": "do", + "items": [ + { + "item": "cover blisters that are likely to burst with a soft plaster or dressing" + }, + { + "item": "wash your hands before touching a burst blister" + }, + { + "item": "allow the fluid to drain before covering it" + }, + { + "item": "keep the area clean and dry while it heals" + } + ] + }) }} + + {{ cardDoDont({ + "type": "dont", + "items": [ + { + "item": "burst a blister yourself" + }, + { + "item": "peel the skin off a burst blister" + }, + { + "item": "wear the shoes or use the equipment that caused your blister until it heals" + }, + { + "item": "ignore signs that it may be infected" + } + ] + }) }} +
diff --git a/packages/site/views/design-system/components/card-do-dont/index.njk b/packages/site/views/design-system/components/card-do-dont/index.njk new file mode 100644 index 000000000..28905bb79 --- /dev/null +++ b/packages/site/views/design-system/components/card-do-dont/index.njk @@ -0,0 +1,33 @@ +{% set pageTitle = "Card / Do & Don’t" %} +{% set pageSection = "Design system" %} +{% set subSection = "Components" %} +{% set pageDescription = "Use Card / Do & Don’t to give users short, scannable recommendations." %} +{% set theme = "Content presentation" %} +{% set dateUpdated = "March 2026" %} +{% set hideDescription = "true" %} + +{% extends "app-layout.njk" %} + +{% block breadcrumb %} + {% include "../_breadcrumb.njk" %} +{% endblock %} + +{% block bodyContent %} + + {{ designExample({ + group: "components", + item: "card-do-dont", + type: "default" + }) }} + +

When to use Card / Do & Don’t

+

Use Card / Do & Don’t to give users short, actionable recommendations that are easier to scan as positive and negative lists.

+ +

How to use Card / Do & Don’t

+

Keep each item brief. Dos should usually come before Don’ts, and each list should stay focused on one topic.

+

If you only have a single point, consider whether a Card / Callout or Inset text would be clearer.

+ +

Accessibility

+

Do not rely on the icons alone. The headings and list text must still make sense for users who do not perceive colour or icon shape.

+ +{% endblock %} diff --git a/packages/site/views/design-system/components/card-do-dont/macro-options.json b/packages/site/views/design-system/components/card-do-dont/macro-options.json new file mode 100644 index 000000000..cd1f32638 --- /dev/null +++ b/packages/site/views/design-system/components/card-do-dont/macro-options.json @@ -0,0 +1,54 @@ +{ + "params": [ + { + "name": "type", + "type": "string", + "required": false, + "description": "Visual type: `do` or `dont`. Default: `do`." + }, + { + "name": "heading", + "type": "string", + "required": false, + "description": "Optional heading text. Defaults to `Do` or `Don’t` from `type`." + }, + { + "name": "headingLevel", + "type": "integer", + "required": false, + "description": "Optional heading level. Default: 3." + }, + { + "name": "items", + "type": "array", + "required": true, + "description": "Array of item objects.", + "params": [ + { + "name": "item", + "type": "string", + "required": true, + "description": "Text to use within each list item." + } + ] + }, + { + "name": "hidePrefix", + "type": "boolean", + "required": false, + "description": "Deprecated compatibility option. When type is `dont`, hides the legacy `do not` prefix. Omit this for new work." + }, + { + "name": "classes", + "type": "string", + "required": false, + "description": "Classes to add to the Card / Do & Don’t." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes to add to the Card / Do & Don’t." + } + ] +} diff --git a/packages/site/views/design-system/components/card/basic-dismissible/index.njk b/packages/site/views/design-system/components/card/basic-dismissible/index.njk new file mode 100644 index 000000000..18e1ab522 --- /dev/null +++ b/packages/site/views/design-system/components/card/basic-dismissible/index.njk @@ -0,0 +1,10 @@ +{% from 'card/macro.njk' import card %} + +{{ card({ + "heading": "Update available", + "headingLevel": "3", + "description": "A newer version of this content is available for review.", + "dismissButton": { + "label": "Dismiss update message" + } +}) }} diff --git a/packages/site/views/design-system/components/card/basic-success/index.njk b/packages/site/views/design-system/components/card/basic-success/index.njk new file mode 100644 index 000000000..e12170444 --- /dev/null +++ b/packages/site/views/design-system/components/card/basic-success/index.njk @@ -0,0 +1,11 @@ +{% from 'card/macro.njk' import card %} + +{{ card({ + "heading": "Profile complete", + "headingLevel": "3", + "description": "You’ve completed all the required profile details.", + "icon": { + "name": "Done", + "size": 32 + } +}) }} diff --git a/packages/site/views/design-system/components/card/card-with-icon/index.njk b/packages/site/views/design-system/components/card/card-with-icon/index.njk index 02c7c2c64..5dc2ff5d9 100644 --- a/packages/site/views/design-system/components/card/card-with-icon/index.njk +++ b/packages/site/views/design-system/components/card/card-with-icon/index.njk @@ -1,8 +1,11 @@ -{% from 'card/macro.njk' import cardWithIcon %} +{% from 'card/macro.njk' import card %} -{{ cardWithIcon({ - "heading": "Congratulations", - "headingLevel": "3", - "descriptionHtml": "

You've completed all your tasks

", - "classes": "ofh-card__with-icon" +{{ card({ + "heading": "Congratulations", + "headingLevel": "3", + "descriptionHtml": "

You've completed all your tasks

", + "icon": { + "name": "Done", + "size": 32 + } }) }} diff --git a/packages/site/views/design-system/components/card/clickable-action/index.njk b/packages/site/views/design-system/components/card/clickable-action/index.njk new file mode 100644 index 000000000..d8b252dcc --- /dev/null +++ b/packages/site/views/design-system/components/card/clickable-action/index.njk @@ -0,0 +1,32 @@ +{% from 'card/macro.njk' import card %} + +{{ card({ + "variant": "clickable", + "href": "#", + "heading": "Introduction to care and support", + "headingLevel": "3", + "tag": { + "text": "New", + "classes": "ofh-tag--blue" + }, + "description": "A quick guide for people who have care and support needs and their carers.", + "metadataItems": [ + { + "icon": "FmdGoodOutlined", + "text": "Online" + }, + { + "icon": "CalendarTodayOutlined", + "text": "Updated today" + }, + { + "icon": "AccessTime", + "text": "5 minute read" + } + ], + "helperText": "Recommended for new participants.", + "icon": { + "name": "ArrowCircleRightColour", + "size": 32 + } +}) }} diff --git a/packages/site/views/design-system/components/card/clickable-card-with-icon/index.njk b/packages/site/views/design-system/components/card/clickable-card-with-icon/index.njk index 17706a207..39cc1451d 100644 --- a/packages/site/views/design-system/components/card/clickable-card-with-icon/index.njk +++ b/packages/site/views/design-system/components/card/clickable-card-with-icon/index.njk @@ -1,17 +1,13 @@ {% from 'card/macro.njk' import card %} -{% from 'action-link/macro.njk' import actionLink %} -{% call card({ - "href": "#", - "heading": "If you need help now, but it’s not an emergency", - "headingLevel": "3", - "descriptionHtml": "

Go to 111.nhs.uk or call 111

", - "classes": "ofh-card__with-icon" -}) -%} - - - -{%- endcall %} +{{ card({ + "variant": "clickable", + "href": "#", + "heading": "If you need help now, but it’s not an emergency", + "headingLevel": "3", + "descriptionHtml": "

Go to 111.nhs.uk or call 111

", + "icon": { + "name": "ArrowCircleRightColour", + "size": 32 + } +}) }} diff --git a/packages/site/views/design-system/components/card/clickable-numeric/index.njk b/packages/site/views/design-system/components/card/clickable-numeric/index.njk new file mode 100644 index 000000000..81d327dc6 --- /dev/null +++ b/packages/site/views/design-system/components/card/clickable-numeric/index.njk @@ -0,0 +1,10 @@ +{% from 'card/macro.njk' import card %} + +{{ card({ + "variant": "clickable", + "number": "12", + "actionLink": { + "text": "Open tasks", + "href": "#" + } +}) }} diff --git a/packages/site/views/design-system/components/card/clickable/index.njk b/packages/site/views/design-system/components/card/clickable/index.njk index 472ad25dc..7f1ccdeb8 100644 --- a/packages/site/views/design-system/components/card/clickable/index.njk +++ b/packages/site/views/design-system/components/card/clickable/index.njk @@ -1,8 +1,8 @@ {% from 'card/macro.njk' import card %} {{ card({ + "variant": "clickable", "href": "#", - "clickable": "true", "heading": "Introduction to care and support", "headingClasses": "ofh-heading-m", "description": "A quick guide for people who have care and support needs and their carers" diff --git a/packages/site/views/design-system/components/card/group-quarter/index.njk b/packages/site/views/design-system/components/card/group-quarter/index.njk index ae0c7e70d..775a2bc00 100644 --- a/packages/site/views/design-system/components/card/group-quarter/index.njk +++ b/packages/site/views/design-system/components/card/group-quarter/index.njk @@ -3,26 +3,42 @@ diff --git a/packages/site/views/design-system/components/card/index.njk b/packages/site/views/design-system/components/card/index.njk index 0ca90f2a5..987b5ca28 100644 --- a/packages/site/views/design-system/components/card/index.njk +++ b/packages/site/views/design-system/components/card/index.njk @@ -1,10 +1,10 @@ {% set pageTitle = "Card" %} {% set pageSection = "Design system" %} {% set subSection = "Components" %} -{% set pageDescription = "Use a card to give users a brief summary of content or a task, often with a link to more detail. You can display a card alongside other cards to group related content or tasks." %} -{% set theme = "Navigation" %} -{% set dateUpdated = "November 2021" %} -{% set backlog_issue_id = "159" %} +{% set pageDescription = "Use a card to present short, scannable summaries of content, status or next steps." %} +{% set theme = "Content presentation" %} +{% set dateUpdated = "March 2026" %} +{% set backlog_issue_id = "DSE-324" %} {% set hideDescription = "true" %} {% extends "app-layout.njk" %} @@ -16,11 +16,12 @@ {% block bodyContent %}

When to use a card

-

Use a card to give users a brief summary of content or a task, often with a link to more detail. You can display a card alongside other cards to group related content or tasks.

+

Use a card to give users a short summary of content, status or a next step. Cards work well when people need to scan a page and decide what to do next.

How it works

-

Cards should be easy to scan for relevant and actionable information. They can contain multiple elements, such as an image, title, text and links.

-

Cards are different from the pattern to help users decide when and where to get care (care cards).

+

Cards should stay concise and self-contained. They can include a heading, short supporting content, metadata, a tag, an action link or an icon.

+

Use Card / Callout for feedback-style messages and Card / Do & Don’t for short lists of recommendations.

+

Legacy feature-card and care-card options are deprecated compatibility APIs for existing toolkit consumers. Use the Card family APIs documented here for new work.

Basic card

@@ -48,13 +49,40 @@ type: "clickable" }) }} -

Clickable card with icon

-

As above, with an icon at the right hand side of the card.

+

Basic dismissible card

+

Use a dismiss button only when removing the card from view is a meaningful user action.

{{ designExample({ group: "components", item: "card", - type: "clickable-card-with-icon" + type: "basic-dismissible" + }) }} + +

Basic success card

+

Use the icon prop to add a supporting status icon when it helps users interpret the message more quickly.

+ + {{ designExample({ + group: "components", + item: "card", + type: "basic-success" + }) }} + +

Clickable action card

+

Use tags, metadata and helper text to add context without making the card harder to scan.

+ + {{ designExample({ + group: "components", + item: "card", + type: "clickable-action" + }) }} + +

Clickable numeric card

+

Numeric cards work well for dashboards and summary views where the number is the main message.

+ + {{ designExample({ + group: "components", + item: "card", + type: "clickable-numeric" }) }}

Card with an image

@@ -112,7 +140,13 @@ type: "heading-size" }) }} +

Clickable cards

+

Clickable cards still need a clear primary link inside the card. Do not make multiple unrelated controls part of the same large hit area.

+

If a card contains secondary buttons or links, make sure they remain independently focusable and operable with the keyboard.

+

Research

+

Cards are a familiar pattern for helping people scan related content and choose a next step. Keep each card focused on one message so the layout supports that scanning behaviour.

+

When cards become dense or require multiple interactions, users have to work harder to understand where to click and what matters most.

We have tested cards on the NHS website, Summary Care Record and NHS login help centre. We found that they helped users: