{ "name": "Summary list", "component": "summary-list", "fixtures": [ { "name": "default", "context": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } }, { "key": { "text": "Contact information" }, "value": { "html": "73 Roman Rd
\nLeeds
\nLS2 5ZN" } }, { "key": { "text": "Contact details" }, "value": { "html": "

07700 900362

\n

karen.francis@example.com

" } } ] }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\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 Contact information\n
\n
\n 73 Roman Rd
\n Leeds
\n LS2 5ZN\n
\n
\n
\n
\n Contact details\n
\n
\n

07700 900362

\n

karen.francis@example.com

\n
\n
\n
\n" }, { "name": "example person: Karen Francis", "context": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } } ] }, "screenshot": false, "options": { "hidden": true }, "html": "
\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" }, { "name": "example person: Karen Francis (no border)", "context": { "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } } ] }, "screenshot": false, "options": { "hidden": true }, "html": "
\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" }, { "name": "example person: Sarah Philips (no border)", "context": { "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Sarah Philips" } }, { "key": { "text": "Date of birth" }, "value": { "text": "5 January 1978" } } ] }, "screenshot": false, "options": { "hidden": true }, "html": "
\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" }, { "name": "with actions", "context": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" }, "actions": { "items": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "name" } ] } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" }, "actions": { "items": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "date of birth" } ] } }, { "key": { "text": "Contact information" }, "value": { "html": "73 Roman Rd
\nLeeds
\nLS2 5ZN" }, "actions": { "items": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "contact information" } ] } }, { "key": { "text": "Contact details" }, "value": { "html": "

07700 900362

\n

karen.francis@example.com

" }, "actions": { "items": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "contact details" } ] } } ] }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n Change name\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n Change date of birth\n
\n
\n
\n
\n Contact information\n
\n
\n 73 Roman Rd
\n Leeds
\n LS2 5ZN\n
\n
\n Change contact information\n
\n
\n
\n
\n Contact details\n
\n
\n

07700 900362

\n

karen.francis@example.com

\n
\n
\n Change contact details\n
\n
\n
\n" }, { "name": "with actions array", "context": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" }, "actions": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "name" } ] }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" }, "actions": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "date of birth" } ] }, { "key": { "text": "Contact information" }, "value": { "html": "73 Roman Rd
\nLeeds
\nLS2 5ZN" }, "actions": { "items": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "contact information" } ] } }, { "key": { "text": "Contact details" }, "value": { "html": "

07700 900362

\n

karen.francis@example.com

" }, "actions": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "contact details" } ] } ] }, "screenshot": false, "options": {}, "html": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n Change name\n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n Change date of birth\n
\n
\n
\n
\n Contact information\n
\n
\n 73 Roman Rd
\n Leeds
\n LS2 5ZN\n
\n
\n Change contact information\n
\n
\n
\n
\n Contact details\n
\n
\n

07700 900362

\n

karen.francis@example.com

\n
\n
\n Change contact details\n
\n
\n
\n" }, { "name": "with actions as buttons", "context": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" }, "actions": { "items": [ { "type": "submit", "text": "Change", "visuallyHiddenText": "name" } ] } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" }, "actions": { "items": [ { "type": "submit", "text": "Change", "visuallyHiddenText": "date of birth" } ] } }, { "key": { "text": "Contact information" }, "value": { "html": "73 Roman Rd
\nLeeds
\nLS2 5ZN" }, "actions": { "items": [ { "type": "submit", "text": "Change", "visuallyHiddenText": "contact information" } ] } }, { "key": { "text": "Contact details" }, "value": { "html": "

07700 900362

\n

karen.francis@example.com

" }, "actions": { "items": [ { "type": "submit", "text": "Change", "visuallyHiddenText": "contact details" } ] } } ] }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n \n
\n
\n
\n
\n Date of birth\n
\n
\n 15 March 1984\n
\n
\n \n
\n
\n
\n
\n Contact information\n
\n
\n 73 Roman Rd
\n Leeds
\n LS2 5ZN\n
\n
\n \n
\n
\n
\n
\n Contact details\n
\n
\n

07700 900362

\n

karen.francis@example.com

\n
\n
\n \n
\n
\n
\n" }, { "name": "with item values as array of strings", "context": { "rows": [ { "key": "Name", "value": [ "Karen Francis" ] }, { "key": "Appointments", "value": [ "18 November 2023", "5 August 2024" ] } ] }, "screenshot": false, "options": {}, "html": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Appointments\n
\n
\n 18 November 2023, 5 August 2024\n
\n
\n
\n" }, { "name": "with item values as numbers", "context": { "rows": [ { "key": "Name", "value": "Karen Francis" }, { "key": "Age", "value": 42 } ] }, "screenshot": false, "options": {}, "html": "
\n
\n
\n Name\n
\n
\n Karen Francis\n
\n
\n
\n
\n Age\n
\n
\n 42\n
\n
\n
\n" }, { "name": "with item values as strings", "context": { "rows": [ { "key": "Name", "value": "Karen Francis" }, { "key": "Date of birth", "value": "15 March 1984" } ] }, "screenshot": false, "options": {}, "html": "
\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" }, { "name": "with item widths", "context": { "rows": [ { "key": { "text": "Name", "width": "one-half" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth", "width": "one-half" }, "value": { "text": "15 March 1984" } } ] }, "screenshot": false, "options": {}, "html": "
\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" }, { "name": "with multiple actions", "context": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" }, "actions": { "items": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "date of birth" } ] } }, { "key": { "text": "Contact information" }, "value": { "html": "73 Roman Rd
\nLeeds
\nLS2 5ZN" }, "actions": { "items": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "contact information" } ] } }, { "key": { "text": "Contact details" }, "value": { "html": "

07700 900362

\n

karen.francis@example.com

" }, "actions": { "items": [ { "href": "#/add", "text": "Add", "visuallyHiddenText": "new contact details" }, { "href": "#/change", "text": "Change", "visuallyHiddenText": "contact details" } ] } }, { "key": { "text": "Medicines" }, "value": { "html": "

Isotretinoin capsules (Roaccutane)

\n

Isotretinoin gel (Isotrex)

\n

Pepto-Bismol (bismuth subsalicylate)

" }, "actions": { "items": [ { "href": "#/add", "text": "Add", "visuallyHiddenText": "new medicine" }, { "href": "#/change", "text": "Change", "visuallyHiddenText": "medicines" } ] } } ] }, "screenshot": false, "options": { "width": "full" }, "html": "
\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 Change date of birth\n
\n
\n
\n
\n Contact information\n
\n
\n 73 Roman Rd
\n Leeds
\n LS2 5ZN\n
\n
\n Change contact information\n
\n
\n
\n
\n Contact details\n
\n
\n

07700 900362

\n

karen.francis@example.com

\n
\n
\n \n
\n
\n
\n
\n Medicines\n
\n
\n

Isotretinoin capsules (Roaccutane)

\n

Isotretinoin gel (Isotrex)

\n

Pepto-Bismol (bismuth subsalicylate)

\n
\n
\n \n
\n
\n
\n" }, { "name": "with multiple actions array", "context": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" }, "actions": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "date of birth" } ] }, { "key": { "text": "Contact information" }, "value": { "html": "73 Roman Rd
\nLeeds
\nLS2 5ZN" }, "actions": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "contact information" } ] }, { "key": { "text": "Contact details" }, "value": { "html": "

07700 900362

\n

karen.francis@example.com

" }, "actions": [ { "href": "#/add", "text": "Add", "visuallyHiddenText": "new contact details" }, { "href": "#/change", "text": "Change", "visuallyHiddenText": "contact details" } ] }, { "key": { "text": "Medicines" }, "value": { "html": "

Isotretinoin capsules (Roaccutane)

\n

Isotretinoin gel (Isotrex)

\n

Pepto-Bismol (bismuth subsalicylate)

" }, "actions": [ { "href": "#/add", "text": "Add", "visuallyHiddenText": "new medicine" }, { "href": "#/change", "text": "Change", "visuallyHiddenText": "medicines" } ] } ] }, "screenshot": false, "options": { "width": "full" }, "html": "
\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 Change date of birth\n
\n
\n
\n
\n Contact information\n
\n
\n 73 Roman Rd
\n Leeds
\n LS2 5ZN\n
\n
\n Change contact information\n
\n
\n
\n
\n Contact details\n
\n
\n

07700 900362

\n

karen.francis@example.com

\n
\n
\n \n
\n
\n
\n
\n Medicines\n
\n
\n

Isotretinoin capsules (Roaccutane)

\n

Isotretinoin gel (Isotrex)

\n

Pepto-Bismol (bismuth subsalicylate)

\n
\n
\n \n
\n
\n
\n" }, { "name": "with multiple actions as buttons", "context": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" }, "actions": { "items": [ { "type": "submit", "text": "Change", "visuallyHiddenText": "date of birth" } ] } }, { "key": { "text": "Contact information" }, "value": { "html": "73 Roman Rd
\nLeeds
\nLS2 5ZN" }, "actions": { "items": [ { "type": "submit", "text": "Change", "visuallyHiddenText": "contact information" } ] } }, { "key": { "text": "Contact details" }, "value": { "html": "

07700 900362

\n

karen.francis@example.com

" }, "actions": { "items": [ { "type": "submit", "text": "Add", "visuallyHiddenText": "new contact details" }, { "type": "submit", "text": "Change", "visuallyHiddenText": "contact details" } ] } }, { "key": { "text": "Medicines" }, "value": { "html": "

Isotretinoin capsules (Roaccutane)

\n

Isotretinoin gel (Isotrex)

\n

Pepto-Bismol (bismuth subsalicylate)

" }, "actions": { "items": [ { "type": "submit", "text": "Add", "visuallyHiddenText": "new medicine" }, { "type": "submit", "text": "Change", "visuallyHiddenText": "medicines" } ] } } ] }, "screenshot": false, "options": { "width": "full" }, "html": "
\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 Contact information\n
\n
\n 73 Roman Rd
\n Leeds
\n LS2 5ZN\n
\n
\n \n
\n
\n
\n
\n Contact details\n
\n
\n

07700 900362

\n

karen.francis@example.com

\n
\n
\n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
\n
\n
\n
\n
\n Medicines\n
\n
\n

Isotretinoin capsules (Roaccutane)

\n

Isotretinoin gel (Isotrex)

\n

Pepto-Bismol (bismuth subsalicylate)

\n
\n
\n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
\n
\n
\n
\n" }, { "name": "with multiple actions (empty items)", "context": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" }, "actions": { "items": [ false, { "href": "#/change", "text": "Change", "visuallyHiddenText": "date of birth" } ] } }, { "key": { "text": "Contact information" }, "value": { "html": "73 Roman Rd
\nLeeds
\nLS2 5ZN" }, "actions": { "items": [ false, { "href": "#/change", "text": "Change", "visuallyHiddenText": "contact information" } ] } }, { "key": { "text": "Contact details" }, "value": { "html": "

07700 900362

\n

karen.francis@example.com

" }, "actions": { "items": [ { "href": "#/add", "text": "Add", "visuallyHiddenText": "new contact details" }, { "href": "#/change", "text": "Change", "visuallyHiddenText": "contact details" } ] } }, { "key": { "text": "Medicines" }, "value": { "html": "

Isotretinoin capsules (Roaccutane)

\n

Isotretinoin gel (Isotrex)

\n

Pepto-Bismol (bismuth subsalicylate)

" }, "actions": { "items": [ { "href": "#/add", "text": "Add", "visuallyHiddenText": "new medicine" }, { "href": "#/change", "text": "Change", "visuallyHiddenText": "medicines" } ] } } ] }, "screenshot": false, "options": { "width": "full" }, "html": "
\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 Change date of birth\n
\n
\n
\n
\n Contact information\n
\n
\n 73 Roman Rd
\n Leeds
\n LS2 5ZN\n
\n
\n Change contact information\n
\n
\n
\n
\n Contact details\n
\n
\n

07700 900362

\n

karen.francis@example.com

\n
\n
\n \n
\n
\n
\n
\n Medicines\n
\n
\n

Isotretinoin capsules (Roaccutane)

\n

Isotretinoin gel (Isotrex)

\n

Pepto-Bismol (bismuth subsalicylate)

\n
\n
\n \n
\n
\n
\n" }, { "name": "without border", "context": { "border": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } }, { "key": { "text": "Contact information" }, "value": { "html": "73 Roman Rd
\nLeeds
\nLS2 5ZN" } }, { "key": { "text": "Contact details" }, "value": { "html": "

07700 900362

\n

karen.francis@example.com

" } } ] }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\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 Contact information\n
\n
\n 73 Roman Rd
\n Leeds
\n LS2 5ZN\n
\n
\n
\n
\n Contact details\n
\n
\n

07700 900362

\n

karen.francis@example.com

\n
\n
\n
\n" }, { "name": "without last row border", "context": { "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } }, { "key": { "text": "Contact information" }, "value": { "html": "73 Roman Rd
\nLeeds
\nLS2 5ZN" } }, { "key": { "text": "Contact details" }, "value": { "html": "

07700 900362

\n

karen.francis@example.com

" } } ] }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\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 Contact information\n
\n
\n 73 Roman Rd
\n Leeds
\n LS2 5ZN\n
\n
\n
\n
\n Contact details\n
\n
\n

07700 900362

\n

karen.francis@example.com

\n
\n
\n
\n" }, { "name": "without specific row border", "context": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } }, { "key": { "text": "Contact information" }, "value": { "html": "73 Roman Rd
\nLeeds
\nLS2 5ZN" } }, { "border": false, "key": { "text": "Contact details" }, "value": { "html": "

07700 900362

\n

karen.francis@example.com

" } } ] }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\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 Contact information\n
\n
\n 73 Roman Rd
\n Leeds
\n LS2 5ZN\n
\n
\n
\n
\n Contact details\n
\n
\n

07700 900362

\n

karen.francis@example.com

\n
\n
\n
\n" }, { "name": "as a card", "context": { "card": { "heading": { "text": "Regional Manager", "size": "m" } }, "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } } ] }, "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" }, { "name": "as a card (clickable) without actions", "context": { "card": { "heading": { "text": "Regional Manager", "size": "m" }, "href": "#/card-clickable", "clickable": true }, "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } } ] }, "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" }, { "name": "as a card (feature) with actions", "context": { "card": { "heading": { "text": "Regional Manager", "size": "m" }, "variant": "feature", "actions": { "items": [ { "text": "Delete", "href": "#/delete" }, { "text": "Withdraw", "href": "#/withdraw" } ] } }, "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } } ] }, "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
\n" }, { "name": "as a card (feature) with custom HTML", "context": { "card": { "heading": { "text": "Your read", "size": "m" }, "variant": "feature" }, "lastRowBorder": false, "rows": [ { "key": { "text": "Opinion" }, "value": { "html": "

\n Recall for assessment\n \n

" }, "actions": { "items": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "opinion" } ] } }, { "key": { "text": "Detailed opinion" }, "value": { "html": "
\n
\n

\n Right breast\n

\n

\n Abnormal\n \n

\n
\n
\n

\n Left breast\n

\n

\n Not recorded\n

\n
\n
" }, "actions": { "items": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "detailed opinion" } ] } }, { "key": { "text": "Annotations" }, "value": { "html": "

\n Right breast\n

\n

\n Microcalcification outside a mass, Clinical abnormality – Level 2 (benign)\n

" }, "actions": { "items": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "annotations" } ] } } ] }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": { "width": "full" }, "html": "
\n
\n

\n Your read\n

\n
\n
\n
\n Opinion\n
\n
\n

\n Recall for assessment\n \n

\n
\n
\n Change opinion (Your read)\n
\n
\n
\n
\n Detailed opinion\n
\n
\n
\n
\n

\n Right breast\n

\n

\n Abnormal\n \n

\n
\n
\n

\n Left breast\n

\n

\n Not recorded\n

\n
\n
\n
\n
\n Change detailed opinion (Your read)\n
\n
\n
\n
\n Annotations\n
\n
\n

\n Right breast\n

\n

\n Microcalcification outside a mass, Clinical abnormality – Level 2 (benign)\n

\n
\n
\n Change annotations (Your read)\n
\n
\n
\n
\n
\n" }, { "name": "as a card (secondary) with actions", "context": { "card": { "heading": { "text": "Regional Manager", "size": "m" }, "variant": "secondary", "actions": { "items": [ { "text": "Delete", "href": "#/delete" }, { "text": "Withdraw", "href": "#/withdraw" } ] } }, "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } } ] }, "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
\n" }, { "name": "as a card (type emergency) with actions", "context": { "card": { "heading": { "text": "Regional Manager" }, "variant": "emergency", "actions": { "items": [ { "text": "Delete", "href": "#/delete" }, { "text": "Withdraw", "href": "#/withdraw" } ] } }, "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } } ] }, "screenshot": false, "options": {}, "html": "
\n
\n

\n \n Immediate action required: Regional Manager\n \n

\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
\n" }, { "name": "as a card (type non-urgent) with actions", "context": { "card": { "heading": { "text": "Regional Manager" }, "variant": "non-urgent", "actions": { "items": [ { "text": "Delete", "href": "#/delete" }, { "text": "Withdraw", "href": "#/withdraw" } ] } }, "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } } ] }, "screenshot": false, "options": {}, "html": "
\n
\n

\n \n Non-urgent advice: Regional Manager\n \n

\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
\n" }, { "name": "as a card (type urgent) with actions", "context": { "card": { "heading": { "text": "Regional Manager" }, "variant": "urgent", "actions": { "items": [ { "text": "Delete", "href": "#/delete" }, { "text": "Withdraw", "href": "#/withdraw" } ] } }, "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } } ] }, "screenshot": false, "options": {}, "html": "
\n
\n

\n \n Urgent advice: Regional Manager\n \n

\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
\n" }, { "name": "as a card with action", "context": { "card": { "heading": { "text": "Regional Manager", "size": "m" }, "actions": { "items": [ { "text": "Delete", "href": "#/delete" } ] } }, "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } } ] }, "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
\n" }, { "name": "as a card with action as a button", "context": { "card": { "heading": { "text": "Regional Manager", "size": "m" }, "actions": { "items": [ { "type": "submit", "text": "Delete" } ] } }, "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } } ] }, "screenshot": false, "options": {}, "html": "
\n
\n

\n Regional Manager\n

\n
\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
\n" }, { "name": "as a card with actions", "context": { "card": { "heading": { "text": "Regional Manager", "size": "m" }, "actions": { "items": [ { "text": "Delete", "href": "#/delete" }, { "text": "Withdraw", "href": "#/withdraw" } ] } }, "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } } ] }, "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
\n" }, { "name": "as a card with actions as buttons", "context": { "card": { "heading": { "text": "Regional Manager", "size": "m" }, "actions": { "items": [ { "type": "submit", "text": "Delete" }, { "type": "submit", "text": "Withdraw" } ] } }, "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" } } ] }, "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
\n" }, { "name": "as a card with multiple actions", "context": { "card": { "heading": { "text": "Regional Manager", "size": "l" }, "actions": { "items": [ { "text": "Delete", "href": "#/delete" }, { "text": "Withdraw", "href": "#/withdraw" } ] } }, "lastRowBorder": false, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Karen Francis" } }, { "key": { "text": "Date of birth" }, "value": { "text": "15 March 1984" }, "actions": { "items": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "date of birth" } ] } }, { "key": { "text": "Contact information" }, "value": { "html": "73 Roman Rd
\nLeeds
\nLS2 5ZN" }, "actions": { "items": [ { "href": "#/change", "text": "Change", "visuallyHiddenText": "contact information" } ] } }, { "key": { "text": "Contact details" }, "value": { "html": "

07700 900362

\n

karen.francis@example.com

" }, "actions": { "items": [ { "href": "#/add", "text": "Add", "visuallyHiddenText": "new contact details" }, { "href": "#/change", "text": "Change", "visuallyHiddenText": "contact details" } ] } }, { "key": { "text": "Medicines" }, "value": { "html": "

Isotretinoin capsules (Roaccutane)

\n

Isotretinoin gel (Isotrex)

\n

Pepto-Bismol (bismuth subsalicylate)

" }, "actions": { "items": [ { "href": "#/add", "text": "Add", "visuallyHiddenText": "new medicine" }, { "href": "#/change", "text": "Change", "visuallyHiddenText": "medicines" } ] } } ] }, "screenshot": false, "options": { "width": "full" }, "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 Change date of birth (Regional Manager)\n
\n
\n
\n
\n Contact information\n
\n
\n 73 Roman Rd
\n Leeds
\n LS2 5ZN\n
\n
\n Change contact information (Regional Manager)\n
\n
\n
\n
\n Contact details\n
\n
\n

07700 900362

\n

karen.francis@example.com

\n
\n
\n \n
\n
\n
\n
\n Medicines\n
\n
\n

Isotretinoin capsules (Roaccutane)

\n

Isotretinoin gel (Isotrex)

\n

Pepto-Bismol (bismuth subsalicylate)

\n
\n
\n \n
\n
\n
\n
\n
\n" } ] }