{ "name": "Card", "component": "card", "fixtures": [ { "name": "default", "context": { "heading": "If you need help now, but it's not an emergency", "headingLevel": 3 }, "callBlock": "

Go to NHS 111 online or call 111.

", "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n

\n If you need help now, but it's not an emergency\n

\n

Go to NHS 111 online or call 111.

\n
\n
" }, { "name": "basic with custom HTML", "context": { "heading": "Help from NHS 111", "headingLevel": 3 }, "callBlock": "

If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.

\n

Go to 111.nhs.uk or call 111.

\n

For a life-threatening emergency call 999.

", "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n

\n Help from NHS 111\n

\n

If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.

\n

Go to 111.nhs.uk or call 111.

\n

For a life-threatening emergency call 999.

\n
\n
" }, { "name": "basic with heading link", "context": { "href": "#", "heading": "Introduction to care and support", "headingSize": "m", "headingLevel": 3, "description": "A quick guide for people who have care and support needs and their carers" }, "screenshot": false, "options": {}, "html": "
\n
\n

\n Introduction to care and support\n

\n

A quick guide for people who have care and support needs and their carers

\n
\n
" }, { "name": "basic without heading", "context": { "description": "A quick guide for people who have care and support needs and their carers" }, "screenshot": false, "options": {}, "html": "
\n
\n

A quick guide for people who have care and support needs and their carers

\n
\n
" }, { "name": "basic with summary list", "context": { "heading": "Regional Manager", "headingLevel": 3 }, "callBlock": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n", "screenshot": { "viewports": [ "mobile", "tablet" ] }, "options": {}, "html": "
\n
\n

\n Regional Manager\n

\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n
\n
" }, { "name": "basic with summary list and actions", "context": { "heading": "Regional Manager", "headingLevel": 3, "actions": { "items": [ { "text": "Delete", "href": "#/delete" }, { "text": "Withdraw", "href": "#/withdraw" } ] } }, "callBlock": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n", "screenshot": false, "options": {}, "html": "
\n
\n

\n Regional Manager\n

\n \n
\n
\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n
\n
" }, { "name": "basic with summary list and actions (empty items)", "context": { "heading": "Regional Manager", "headingLevel": 3, "actions": { "items": [ { "text": "Delete", "href": "#/delete" }, false ] } }, "callBlock": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n", "screenshot": false, "options": {}, "html": "
\n
\n

\n Regional Manager\n

\n
\n Delete (Regional Manager)\n
\n
\n
\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n
\n
" }, { "name": "basic with summary list and actions, without heading", "context": { "actions": { "items": [ { "text": "Delete", "visuallyHiddenText": "(Karen Francis)", "href": "#/delete" }, { "text": "Withdraw", "visuallyHiddenText": "(Karen Francis)", "href": "#/withdraw" } ] } }, "callBlock": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n", "screenshot": false, "options": {}, "html": "
\n
\n \n
\n
\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n
\n
" }, { "name": "basic with summary list and button", "context": { "heading": "Regional Manager", "headingLevel": 3 }, "callBlock": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n\n\n\n", "screenshot": { "viewports": [ "mobile", "tablet" ] }, "options": {}, "html": "
\n
\n

\n Regional Manager\n

\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n\n\n\n
\n
" }, { "name": "basic with summary list and heading link", "context": { "href": "#", "heading": "Regional Manager", "headingLevel": 3 }, "callBlock": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n", "screenshot": false, "options": {}, "html": "
\n
\n

\n Regional Manager\n

\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n
\n
" }, { "name": "basic with summary lists", "context": { "heading": "Regional Managers", "headingLevel": 3 }, "callBlock": "

East

\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n\n\n

West

\n
\n
\n
\n Name\n
\n
\n Sarah Philips\n
\n
\n
\n
\n Date of birth\n
\n
\n 5 January 1978\n
\n
\n
\n", "screenshot": { "viewports": [ "mobile", "tablet" ] }, "options": {}, "html": "
\n
\n

\n Regional Managers\n

\n

East

\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n\n\n

West

\n
\n
\n
\n Name\n
\n
\n Sarah Philips\n
\n
\n
\n
\n Date of birth\n
\n
\n 5 January 1978\n
\n
\n
\n
\n
" }, { "name": "clickable", "context": { "href": "#", "clickable": true, "heading": "Introduction to care and support", "headingSize": "m", "description": "A quick guide for people who have care and support needs and their carers" }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n

\n Introduction to care and support\n

\n

A quick guide for people who have care and support needs and their carers

\n
\n
" }, { "name": "emergency (red and black)", "context": { "heading": "Call 999 if you have sudden chest pain that:", "headingLevel": 3, "variant": "emergency" }, "callBlock": "\n

You could be having a heart attack. Call 999 immediately as you need immediate treatment in hospital.

", "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n

\n \n Immediate action required: Call 999 if you have sudden chest pain that:\n \n

\n \n
\n
\n \n

You could be having a heart attack. Call 999 immediately as you need immediate treatment in hospital.

\n
\n
" }, { "name": "emergency (red and black) with action link", "context": { "heading": "Call 999 or go to A&E now if:", "headingLevel": 3, "variant": "emergency" }, "callBlock": "\n\n\n \n \n \n Find your nearest A&E\n\n", "screenshot": false, "options": {}, "html": "
\n
\n

\n \n Immediate action required: Call 999 or go to A&E now if:\n \n

\n \n
\n
\n \n\n\n \n \n \n Find your nearest A&E\n\n
\n
" }, { "name": "feature", "context": { "variant": "feature", "heading": "Feature card heading", "description": "Feature card description." }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n

\n Feature card heading\n

\n

Feature card description.

\n
\n
" }, { "name": "feature with A to Z content", "context": { "variant": "feature", "heading": "A", "headingId": "a", "headingSize": "m", "descriptionHtml": "" }, "screenshot": false, "options": {}, "html": "
\n
\n

\n A\n

\n \n
\n
" }, { "name": "feature with nested card and summary list", "context": { "variant": "feature", "heading": "Flu: Follow-up requested" }, "callBlock": "

Sarah Philips (Mum) would like to speak to a member of the team about other options for their child's vaccination.

\n\n Record a new consent response\n\n\n\n

Consent responses

\n\n
\n
\n

\n Sarah Philips (Mum)\n

\n
\n
\n
\n Email address\n
\n
\n sarah.philips@example.com\n
\n
\n
\n
\n Date\n
\n
\n 25 August 2025 at 4:04 pm\n
\n
\n
\n
\n Response\n
\n
\n \n Follow up requested\n \n
\n
\n
\n
\n
\n", "screenshot": false, "options": {}, "html": "
\n
\n

\n Flu: Follow-up requested\n

\n

Sarah Philips (Mum) would like to speak to a member of the team about other options for their child's vaccination.

\n\n Record a new consent response\n\n\n\n

Consent responses

\n\n
\n
\n

\n Sarah Philips (Mum)\n

\n
\n
\n
\n Email address\n
\n
\n sarah.philips@example.com\n
\n
\n
\n
\n Date\n
\n
\n 25 August 2025 at 4:04 pm\n
\n
\n
\n
\n Response\n
\n
\n \n Follow up requested\n \n
\n
\n
\n
\n
\n
\n
" }, { "name": "feature with summary list", "context": { "variant": "feature", "heading": "Feature card heading" }, "callBlock": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n", "screenshot": false, "options": {}, "html": "
\n
\n

\n Feature card heading\n

\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n
\n
" }, { "name": "primary (with chevron)", "context": { "href": "#", "variant": "primary", "clickable": true, "heading": "Breast screening", "headingSize": "m" }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n

\n Breast screening\n

\n \n \n \n
\n
" }, { "name": "primary (with chevron and description)", "context": { "href": "#", "variant": "primary", "clickable": true, "heading": "Introduction to care and support", "headingSize": "m", "description": "A quick guide for people who have care and support needs and their carers" }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n

\n Introduction to care and support\n

\n

A quick guide for people who have care and support needs and their carers

\n \n \n \n
\n
" }, { "name": "secondary", "context": { "href": "#", "clickable": true, "variant": "secondary", "heading": "Urgent and emergency care services", "headingSize": "m", "description": "Services the NHS provides if you need urgent or emergency medical help" }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n

\n Urgent and emergency care services\n

\n

Services the NHS provides if you need urgent or emergency medical help

\n
\n
" }, { "name": "secondary non-clickable with custom description", "context": { "href": "#", "variant": "secondary", "heading": "Why we are reinvesting in the NHS Prototype kit", "headingClasses": "nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2", "descriptionHtml": "

21 July 2025

\n

Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.

" }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n

\n Why we are reinvesting in the NHS Prototype kit\n

\n

21 July 2025

\n

Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.

\n
\n
" }, { "name": "secondary with custom HTML", "context": { "variant": "secondary", "heading": "Help from NHS 111", "headingLevel": 3 }, "callBlock": "

If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.

\n

Go to 111.nhs.uk or call 111.

\n

For a life-threatening emergency call 999.

", "screenshot": false, "options": {}, "html": "
\n
\n

\n Help from NHS 111\n

\n

If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.

\n

Go to 111.nhs.uk or call 111.

\n

For a life-threatening emergency call 999.

\n
\n
" }, { "name": "secondary with heading link", "context": { "href": "#", "variant": "secondary", "heading": "Introduction to care and support", "headingSize": "m", "headingLevel": 3, "description": "A quick guide for people who have care and support needs and their carers" }, "screenshot": false, "options": {}, "html": "
\n
\n

\n Introduction to care and support\n

\n

A quick guide for people who have care and support needs and their carers

\n
\n
" }, { "name": "secondary without heading", "context": { "variant": "secondary", "description": "A quick guide for people who have care and support needs and their carers" }, "screenshot": false, "options": {}, "html": "
\n
\n

A quick guide for people who have care and support needs and their carers

\n
\n
" }, { "name": "secondary with summary list", "context": { "variant": "secondary", "heading": "Regional Manager", "headingLevel": 3 }, "callBlock": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n", "screenshot": false, "options": {}, "html": "
\n
\n

\n Regional Manager\n

\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n
\n
" }, { "name": "secondary with summary list and actions", "context": { "variant": "secondary", "heading": "Regional Manager", "headingLevel": 3, "actions": { "items": [ { "text": "Delete", "href": "#/delete" }, { "text": "Withdraw", "href": "#/withdraw" } ] } }, "callBlock": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n", "screenshot": false, "options": {}, "html": "
\n
\n

\n Regional Manager\n

\n \n
\n
\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n
\n
" }, { "name": "secondary with summary list and actions (empty items)", "context": { "variant": "secondary", "heading": "Regional Manager", "headingLevel": 3, "actions": { "items": [ { "text": "Delete", "href": "#/delete" }, false ] } }, "callBlock": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n", "screenshot": false, "options": {}, "html": "
\n
\n

\n Regional Manager\n

\n
\n Delete (Regional Manager)\n
\n
\n
\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n
\n
" }, { "name": "secondary with summary list and actions, without heading", "context": { "variant": "secondary", "actions": { "items": [ { "text": "Delete", "visuallyHiddenText": "(Karen Francis)", "href": "#/delete" }, { "text": "Withdraw", "visuallyHiddenText": "(Karen Francis)", "href": "#/withdraw" } ] } }, "callBlock": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n", "screenshot": false, "options": {}, "html": "
\n
\n \n
\n
\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n
\n
" }, { "name": "secondary with summary list and button", "context": { "variant": "secondary", "heading": "Regional Manager", "headingLevel": 3 }, "callBlock": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n\n\n\n", "screenshot": false, "options": {}, "html": "
\n
\n

\n Regional Manager\n

\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n\n\n\n
\n
" }, { "name": "secondary with summary list and heading link", "context": { "href": "#", "variant": "secondary", "heading": "Regional Manager", "headingLevel": 3 }, "callBlock": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n", "screenshot": false, "options": {}, "html": "
\n
\n

\n Regional Manager\n

\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n
\n
" }, { "name": "secondary with summary lists", "context": { "variant": "secondary", "heading": "Regional Managers", "headingLevel": 3 }, "callBlock": "

East

\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n\n\n

West

\n
\n
\n
\n Name\n
\n
\n Sarah Philips\n
\n
\n
\n
\n Date of birth\n
\n
\n 5 January 1978\n
\n
\n
\n", "screenshot": false, "options": {}, "html": "
\n
\n

\n Regional Managers\n

\n

East

\n
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n
\n\n\n

West

\n
\n
\n
\n Name\n
\n
\n Sarah Philips\n
\n
\n
\n
\n Date of birth\n
\n
\n 5 January 1978\n
\n
\n
\n
\n
" }, { "name": "top task", "context": { "href": "#", "clickable": true, "heading": "Order a repeat prescription", "headingSize": "xs", "headingLevel": 3 }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": { "width": "one-third" }, "html": "
\n
\n

\n Order a repeat prescription\n

\n
\n
" }, { "name": "non-urgent (blue)", "context": { "heading": "Speak to a GP if:", "headingLevel": 3, "variant": "non-urgent" }, "callBlock": "\n

Tell the receptionist you think it's chickenpox before going in. They may recommend a special appointment time if other patients are at risk.

", "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n

\n \n Non-urgent advice: Speak to a GP if:\n \n

\n \n
\n
\n \n

Tell the receptionist you think it's chickenpox before going in. They may recommend a special appointment time if other patients are at risk.

\n
\n
" }, { "name": "urgent (red)", "context": { "heading": "Ask for an urgent GP appointment if:", "headingLevel": 3, "variant": "urgent" }, "callBlock": "\n

In these situations, your GP can prescribe medicine to prevent complications. You need to take it within 24 hours of the spots coming out.

", "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n

\n \n Urgent advice: Ask for an urgent GP appointment if:\n \n

\n \n
\n
\n \n

In these situations, your GP can prescribe medicine to prevent complications. You need to take it within 24 hours of the spots coming out.

\n
\n
" }, { "name": "warning", "context": { "variant": "warning", "heading": "School, nursery or work", "description": "Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared." }, "screenshot": false, "options": {}, "html": "
\n
\n

\n School, nursery or work\n

\n

Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.

\n
\n
" }, { "name": "warning with actions", "context": { "variant": "warning", "heading": "School, nursery or work", "description": "Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.", "actions": { "items": [ { "text": "Dismiss", "href": "#/dismiss" } ] } }, "screenshot": false, "options": {}, "html": "
\n
\n

\n School, nursery or work\n

\n
\n Dismiss (School, nursery or work)\n
\n
\n
\n

Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.

\n
\n
" }, { "name": "with image", "context": { "image": { "src": "https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg" }, "href": "#", "clickable": true, "heading": "Exercise", "headingSize": "m", "description": "Programmes, workouts and tips to get you moving and improve your fitness and wellbeing" }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n \"\"\n
\n

\n Exercise\n

\n

Programmes, workouts and tips to get you moving and improve your fitness and wellbeing

\n
\n
" }, { "name": "with image and caption", "context": { "image": { "html": "
\n \"\"\n
\n No specific amount of time is recommended, but a typical training session could take less than 20 minutes.\n
\n
\n" }, "href": "#", "clickable": true, "heading": "Exercise", "headingSize": "m", "description": "Programmes, workouts and tips to get you moving and improve your fitness and wellbeing" }, "screenshot": false, "options": {}, "html": "
\n
\n \"\"\n
\n No specific amount of time is recommended, but a typical training session could take less than 20 minutes.\n
\n
\n
\n

\n Exercise\n

\n

Programmes, workouts and tips to get you moving and improve your fitness and wellbeing

\n
\n
" }, { "name": "with image and custom HTML", "context": { "image": { "src": "https://service-manual.nhs.uk/assets/blog-prototype-kit.png" }, "href": "https://digital.nhs.uk/blog/design-matters/2025/why-we-are-reinvesting-in-the-nhs-prototype-kit", "clickable": true, "heading": "Why we are reinvesting in the NHS prototype kit", "headingSize": "m", "headingHtml": "

Published on: 21 July 2025

\n

NHS England Design Matters blog

", "description": "Frankie Roberto and Mike Gallagher explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it." }, "screenshot": false, "options": { "width": "one-half" }, "html": "
\n \"\"\n
\n

\n Why we are reinvesting in the NHS prototype kit\n

\n

Published on: 21 July 2025

\n

NHS England Design Matters blog

\n

Frankie Roberto and Mike Gallagher explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.

\n
\n
" } ] }