Summary list examples
-
# default
- Name
- Firstname Lastname
- Date of birth
- 13/08/1980
- Contact information
-
email@email.com
Address line 1
Address line 2
Address line 3
Address line 4
Address line 5
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } }, { "key": { "text": "Contact information" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } }, { "key": { "text": "Contact information" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" } } ] }) }} -
# with actions
- Contact information
-
email@email.com
Address line 1
Address line 2
Address line 3
Address line 4
Address line 5
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "name" }, { "href": "#", "text": "Delete", "visuallyHiddenText": "name" } ] } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "date of birth" } ] } }, { "key": { "text": "Contact information" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" }, "actions": { "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "contact information" }, { "href": "#", "text": "Change", "visuallyHiddenText": "contact information" } ] } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "name" }, { "href": "#", "text": "Delete", "visuallyHiddenText": "name" } ] } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "date of birth" } ] } }, { "key": { "text": "Contact information" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" }, "actions": { "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "contact information" }, { "href": "#", "text": "Change", "visuallyHiddenText": "contact information" } ] } } ] }) }} -
# no-border
- Name
- Firstname Lastname
- Date of birth
- 13/08/1980
- Contact information
-
email@email.com
Address line 1
Address line 2
Address line 3
Address line 4
Address line 5
{ "classes": "govuk-summary-list--no-border", "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } }, { "key": { "text": "Contact information" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "classes": "govuk-summary-list--no-border", "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } }, { "key": { "text": "Contact information" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" } } ] }) }} -
# no-border on last row
- Name
- Firstname Lastname
- Date of birth
- 13/08/1980
- Contact information
-
email@email.com
Address line 1
Address line 2
Address line 3
Address line 4
Address line 5
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } }, { "key": { "text": "Contact information" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" }, "classes": "govuk-summary-list__row--no-border" } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } }, { "key": { "text": "Contact information" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" }, "classes": "govuk-summary-list__row--no-border" } ] }) }} -
# extreme
- Name
- Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky
- Long website address
- https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
- Change long website address
- Long email address
- webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com
- Change long email address
- Pneumonoultramicroscopicsilicovolcanoconiosis
-
Pneumonoultramicroscopicsilicovolcanoconiosis is a word coined by the president of the National Puzzlers’ League as a synonym for the disease known as silicosis. It is the longest word in the English language published in a dictionary, the Oxford English Dictionary, which defines it as "an artificial long word said to mean a lung disease caused by inhaling very fine ash and sand dust."
Silicosis is a form of occupational lung disease caused by inhalation of crystalline silica dust, and is marked by inflammation and scarring in the form of nodular lesions in the upper lobes of the lungs. It is a type of pneumoconiosis.
- Its vanished trees, the trees that had made way for Gatsby’s house, Pneumonoultramicroscopicsilicovolcanoconiosis had once pandered in whispers to the last and greatest of all human dreams; for a transitory enchanted moment man must have held his breath in the presence of this continent, compelled into an aesthetic contemplation he neither understood nor desired, face to face for the last time in history with something commensurate to his capacity for wonder.
- The Great Gatsby
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky" }, "actions": { "items": [ { "href": "#", "text": "Buy" }, { "href": "#", "text": "Use" }, { "href": "#", "text": "Break" }, { "href": "#", "text": "Fix" }, { "href": "#", "text": "Trash" }, { "href": "#", "text": "Change" }, { "href": "#", "text": "Mail" }, { "href": "#", "text": "Upgrade" }, { "href": "#", "text": "Charge" }, { "href": "#", "text": "Point" }, { "href": "#", "text": "Zoom" }, { "href": "#", "text": "Press" }, { "href": "#", "text": "Snap" }, { "href": "#", "text": "Work" }, { "href": "#", "text": "Quick" }, { "href": "#", "text": "Erase" } ] } }, { "key": { "text": "Long website address" }, "value": { "html": "<a class=\"govuk-link\" href=\"https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch\">https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a>\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "long website address" } ] } }, { "key": { "text": "Long email address" }, "value": { "html": "<a class=\"govuk-link\" href=\"mailto:webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com\">webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com</a>\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "long email address" } ] } }, { "key": { "text": "No wrapping allowed" }, "value": { "html": "<p class=\"govuk-body\" style=\"white-space: nowrap;\">michelle.longish.name@example.com</p>\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "no wrapping allowed" } ] } }, { "key": { "text": "Pneumonoultramicroscopicsilicovolcanoconiosis" }, "value": { "html": "<p class=\"govuk-body\">Pneumonoultramicroscopicsilicovolcanoconiosis is a word coined by the president of the National Puzzlers’ League as a synonym for the disease known as silicosis. It is the longest word in the English language published in a dictionary, the Oxford English Dictionary, which defines it as \"an artificial long word said to mean a lung disease caused by inhaling very fine ash and sand dust.\"</p>\n<p class=\"govuk-body\">Silicosis is a form of occupational lung disease caused by inhalation of crystalline silica dust, and is marked by inflammation and scarring in the form of nodular lesions in the upper lobes of the lungs. It is a type of pneumoconiosis.</p>\n" }, "actions": { "items": [ { "href": "#", "text": "Write" }, { "href": "#", "text": "Cut" }, { "href": "#", "text": "Paste" }, { "href": "#", "text": "Save" }, { "href": "#", "text": "Load" }, { "href": "#", "text": "Check" }, { "href": "#", "text": "Quick" }, { "href": "#", "text": "Rewrite" }, { "href": "#", "text": "Plug" }, { "href": "#", "text": "Play" }, { "href": "#", "text": "Burn" }, { "href": "#", "text": "Rip" }, { "href": "#", "text": "Drag and drop" }, { "href": "#", "text": "Zip" }, { "href": "#", "text": "Unzip" }, { "href": "#", "text": "Lock" }, { "href": "#", "text": "Fill" }, { "href": "#", "text": "Curl" }, { "href": "#", "text": "Find" }, { "href": "#", "text": "View" } ] } }, { "key": { "text": "Its vanished trees, the trees that had made way for Gatsby’s house, Pneumonoultramicroscopicsilicovolcanoconiosis had once pandered in whispers to the last and greatest of all human dreams; for a transitory enchanted moment man must have held his breath in the presence of this continent, compelled into an aesthetic contemplation he neither understood nor desired, face to face for the last time in history with something commensurate to his capacity for wonder." }, "value": { "text": "The Great Gatsby" }, "actions": { "items": [ { "href": "#", "text": "Code" }, { "href": "#", "text": "Jam" }, { "href": "#", "text": "Unlock" }, { "href": "#", "text": "Surf" }, { "href": "#", "text": "Scroll" }, { "href": "#", "text": "Pose" }, { "href": "#", "text": "Click" }, { "href": "#", "text": "Cross" }, { "href": "#", "text": "Crack" }, { "href": "#", "text": "Twitch" }, { "href": "#", "text": "Update" }, { "href": "#", "text": "Name" }, { "href": "#", "text": "Read" }, { "href": "#", "text": "Tune" }, { "href": "#", "text": "Print" }, { "href": "#", "text": "Scan" }, { "href": "#", "text": "Send" }, { "href": "#", "text": "Fax" }, { "href": "#", "text": "Rename" }, { "href": "#", "text": "Touch" }, { "href": "#", "text": "Bring" }, { "href": "#", "text": "Pay" }, { "href": "#", "text": "Watch" }, { "href": "#", "text": "Turn" }, { "href": "#", "text": "Leave" }, { "href": "#", "text": "Stop" }, { "href": "#", "text": "Format" } ] } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky" }, "actions": { "items": [ { "href": "#", "text": "Buy" }, { "href": "#", "text": "Use" }, { "href": "#", "text": "Break" }, { "href": "#", "text": "Fix" }, { "href": "#", "text": "Trash" }, { "href": "#", "text": "Change" }, { "href": "#", "text": "Mail" }, { "href": "#", "text": "Upgrade" }, { "href": "#", "text": "Charge" }, { "href": "#", "text": "Point" }, { "href": "#", "text": "Zoom" }, { "href": "#", "text": "Press" }, { "href": "#", "text": "Snap" }, { "href": "#", "text": "Work" }, { "href": "#", "text": "Quick" }, { "href": "#", "text": "Erase" } ] } }, { "key": { "text": "Long website address" }, "value": { "html": "<a class=\"govuk-link\" href=\"https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch\">https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a>\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "long website address" } ] } }, { "key": { "text": "Long email address" }, "value": { "html": "<a class=\"govuk-link\" href=\"mailto:webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com\">webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com</a>\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "long email address" } ] } }, { "key": { "text": "No wrapping allowed" }, "value": { "html": "<p class=\"govuk-body\" style=\"white-space: nowrap;\">michelle.longish.name@example.com</p>\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "no wrapping allowed" } ] } }, { "key": { "text": "Pneumonoultramicroscopicsilicovolcanoconiosis" }, "value": { "html": "<p class=\"govuk-body\">Pneumonoultramicroscopicsilicovolcanoconiosis is a word coined by the president of the National Puzzlers’ League as a synonym for the disease known as silicosis. It is the longest word in the English language published in a dictionary, the Oxford English Dictionary, which defines it as \"an artificial long word said to mean a lung disease caused by inhaling very fine ash and sand dust.\"</p>\n<p class=\"govuk-body\">Silicosis is a form of occupational lung disease caused by inhalation of crystalline silica dust, and is marked by inflammation and scarring in the form of nodular lesions in the upper lobes of the lungs. It is a type of pneumoconiosis.</p>\n" }, "actions": { "items": [ { "href": "#", "text": "Write" }, { "href": "#", "text": "Cut" }, { "href": "#", "text": "Paste" }, { "href": "#", "text": "Save" }, { "href": "#", "text": "Load" }, { "href": "#", "text": "Check" }, { "href": "#", "text": "Quick" }, { "href": "#", "text": "Rewrite" }, { "href": "#", "text": "Plug" }, { "href": "#", "text": "Play" }, { "href": "#", "text": "Burn" }, { "href": "#", "text": "Rip" }, { "href": "#", "text": "Drag and drop" }, { "href": "#", "text": "Zip" }, { "href": "#", "text": "Unzip" }, { "href": "#", "text": "Lock" }, { "href": "#", "text": "Fill" }, { "href": "#", "text": "Curl" }, { "href": "#", "text": "Find" }, { "href": "#", "text": "View" } ] } }, { "key": { "text": "Its vanished trees, the trees that had made way for Gatsby’s house, Pneumonoultramicroscopicsilicovolcanoconiosis had once pandered in whispers to the last and greatest of all human dreams; for a transitory enchanted moment man must have held his breath in the presence of this continent, compelled into an aesthetic contemplation he neither understood nor desired, face to face for the last time in history with something commensurate to his capacity for wonder." }, "value": { "text": "The Great Gatsby" }, "actions": { "items": [ { "href": "#", "text": "Code" }, { "href": "#", "text": "Jam" }, { "href": "#", "text": "Unlock" }, { "href": "#", "text": "Surf" }, { "href": "#", "text": "Scroll" }, { "href": "#", "text": "Pose" }, { "href": "#", "text": "Click" }, { "href": "#", "text": "Cross" }, { "href": "#", "text": "Crack" }, { "href": "#", "text": "Twitch" }, { "href": "#", "text": "Update" }, { "href": "#", "text": "Name" }, { "href": "#", "text": "Read" }, { "href": "#", "text": "Tune" }, { "href": "#", "text": "Print" }, { "href": "#", "text": "Scan" }, { "href": "#", "text": "Send" }, { "href": "#", "text": "Fax" }, { "href": "#", "text": "Rename" }, { "href": "#", "text": "Touch" }, { "href": "#", "text": "Bring" }, { "href": "#", "text": "Pay" }, { "href": "#", "text": "Watch" }, { "href": "#", "text": "Turn" }, { "href": "#", "text": "Leave" }, { "href": "#", "text": "Stop" }, { "href": "#", "text": "Format" } ] } } ] }) }} -
# as a summary card with a text header
Undergraduate teaching assistant
- Name
- Firstname Lastname
- Date of birth
- 13/08/1980
{ "card": { "title": { "text": "Undergraduate teaching assistant" } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "card": { "title": { "text": "Undergraduate teaching assistant" } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }) }} -
# as a summary card with a html header
Undergraduate teaching assistant
- Name
- Firstname Lastname
- Date of birth
- 13/08/1980
{ "card": { "title": { "html": "<em>Undergraduate teaching assistant</em>" } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "card": { "title": { "html": "<em>Undergraduate teaching assistant</em>" } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }) }} -
# as a summary card with actions
Undergraduate teaching assistant
- Name
- Firstname Lastname
- Date of birth
- 13/08/1980
{ "card": { "title": { "text": "Undergraduate teaching assistant" }, "actions": { "items": [ { "text": "Delete job history", "href": "#" }, { "text": "Withdraw job history", "href": "#" } ] } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "card": { "title": { "text": "Undergraduate teaching assistant" }, "actions": { "items": [ { "text": "Delete job history", "href": "#" }, { "text": "Withdraw job history", "href": "#" } ] } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }) }} -
# as a summary card with actions plus summary list actions
Undergraduate teaching assistant
- Name
- Firstname Lastname
{ "card": { "title": { "text": "Undergraduate teaching assistant" }, "actions": { "items": [ { "text": "Delete job history", "href": "#" }, { "text": "Withdraw job history", "href": "#" } ] } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "name" }, { "href": "#", "text": "Delete", "visuallyHiddenText": "name" } ] } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "date of birth" } ] } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "card": { "title": { "text": "Undergraduate teaching assistant" }, "actions": { "items": [ { "text": "Delete job history", "href": "#" }, { "text": "Withdraw job history", "href": "#" } ] } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "name" }, { "href": "#", "text": "Delete", "visuallyHiddenText": "name" } ] } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "date of birth" } ] } } ] }) }} -
# as a summary card extreme
Senior mid-level customer experience enhancement consultant
- Bop it (Senior mid-level customer experience enhancement consultant)
- Twist it (Senior mid-level customer experience enhancement consultant)
- Pull it (Senior mid-level customer experience enhancement consultant)
- Flick it (Senior mid-level customer experience enhancement consultant)
- Spin it (Senior mid-level customer experience enhancement consultant)
- Shout it (Senior mid-level customer experience enhancement consultant)
- Shake it (Senior mid-level customer experience enhancement consultant)
- Name
- Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky
-
- Buy (Senior mid-level customer experience enhancement consultant)
- Use (Senior mid-level customer experience enhancement consultant)
- Break (Senior mid-level customer experience enhancement consultant)
- Fix (Senior mid-level customer experience enhancement consultant)
- Trash (Senior mid-level customer experience enhancement consultant)
- Change (Senior mid-level customer experience enhancement consultant)
- Mail (Senior mid-level customer experience enhancement consultant)
- Upgrade (Senior mid-level customer experience enhancement consultant)
- Charge (Senior mid-level customer experience enhancement consultant)
- Point (Senior mid-level customer experience enhancement consultant)
- Zoom (Senior mid-level customer experience enhancement consultant)
- Press (Senior mid-level customer experience enhancement consultant)
- Snap (Senior mid-level customer experience enhancement consultant)
- Work (Senior mid-level customer experience enhancement consultant)
- Quick (Senior mid-level customer experience enhancement consultant)
- Erase (Senior mid-level customer experience enhancement consultant)
{ "card": { "title": { "text": "Senior mid-level customer experience enhancement consultant" }, "actions": { "items": [ { "text": "Bop it", "href": "#" }, { "text": "Twist it", "href": "#" }, { "text": "Pull it", "href": "#" }, { "text": "Flick it", "href": "#" }, { "text": "Spin it", "href": "#" }, { "text": "Shout it", "href": "#" }, { "text": "Shake it", "href": "#" } ] } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky" }, "actions": { "items": [ { "href": "#", "text": "Buy" }, { "href": "#", "text": "Use" }, { "href": "#", "text": "Break" }, { "href": "#", "text": "Fix" }, { "href": "#", "text": "Trash" }, { "href": "#", "text": "Change" }, { "href": "#", "text": "Mail" }, { "href": "#", "text": "Upgrade" }, { "href": "#", "text": "Charge" }, { "href": "#", "text": "Point" }, { "href": "#", "text": "Zoom" }, { "href": "#", "text": "Press" }, { "href": "#", "text": "Snap" }, { "href": "#", "text": "Work" }, { "href": "#", "text": "Quick" }, { "href": "#", "text": "Erase" } ] } }, { "key": { "text": "Long website address" }, "value": { "html": "<a class=\"govuk-link\" href=\"https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch\">https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a>\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "long website address" } ] } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "card": { "title": { "text": "Senior mid-level customer experience enhancement consultant" }, "actions": { "items": [ { "text": "Bop it", "href": "#" }, { "text": "Twist it", "href": "#" }, { "text": "Pull it", "href": "#" }, { "text": "Flick it", "href": "#" }, { "text": "Spin it", "href": "#" }, { "text": "Shout it", "href": "#" }, { "text": "Shake it", "href": "#" } ] } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky" }, "actions": { "items": [ { "href": "#", "text": "Buy" }, { "href": "#", "text": "Use" }, { "href": "#", "text": "Break" }, { "href": "#", "text": "Fix" }, { "href": "#", "text": "Trash" }, { "href": "#", "text": "Change" }, { "href": "#", "text": "Mail" }, { "href": "#", "text": "Upgrade" }, { "href": "#", "text": "Charge" }, { "href": "#", "text": "Point" }, { "href": "#", "text": "Zoom" }, { "href": "#", "text": "Press" }, { "href": "#", "text": "Snap" }, { "href": "#", "text": "Work" }, { "href": "#", "text": "Quick" }, { "href": "#", "text": "Erase" } ] } }, { "key": { "text": "Long website address" }, "value": { "html": "<a class=\"govuk-link\" href=\"https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch\">https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a>\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "long website address" } ] } } ] }) }} -
# attributes
- Name
- Firstname Lastname
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } } ], "attributes": { "data-attribute-1": "value-1", "data-attribute-2": "value-2" } }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } } ], "attributes": { "data-attribute-1": "value-1", "data-attribute-2": "value-2" } }) }} -
# with falsy values
- Name
- Firstname Lastname
- Name 2
- Firstname2 Lastname2
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, null, false, "", { "key": { "text": "Name 2" }, "value": { "text": "Firstname2 Lastname2" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, null, false, "", { "key": { "text": "Name 2" }, "value": { "text": "Firstname2 Lastname2" } } ] }) }} -
# key with html
- Name
- Firstname Lastname
{ "rows": [ { "key": { "html": "<b>Name</b>" }, "value": { "html": "<strong>Firstname Lastname</strong>" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "html": "<b>Name</b>" }, "value": { "html": "<strong>Firstname Lastname</strong>" } } ] }) }} -
# key with classes
- Name
- Firstname Lastname
{ "rows": [ { "key": { "text": "Name", "classes": "app-custom-class" }, "value": { "text": "Firstname Lastname" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name", "classes": "app-custom-class" }, "value": { "text": "Firstname Lastname" } } ] }) }} -
# value with html
- Name
- email@email.com
{ "rows": [ { "key": { "text": "Name" }, "value": { "html": "<span>email@email.com</span>" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "html": "<span>email@email.com</span>" } } ] }) }} -
# actions href
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "href": "https://www.gov.uk", "text": "Go to GOV.UK" } ] } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "href": "https://www.gov.uk", "text": "Go to GOV.UK" } ] } } ] }) }} -
# actions with html
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "html": "Edit<span class=\"visually-hidden\"> name</span>", "href": "#" } ] } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "html": "Edit<span class=\"visually-hidden\"> name</span>", "href": "#" } ] } } ] }) }} -
# actions with classes
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "classes": "app-custom-class", "items": [ { "text": "Edit", "href": "/edit" } ] } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "classes": "app-custom-class", "items": [ { "text": "Edit", "href": "/edit" } ] } } ] }) }} -
# actions with attributes
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "text": "Edit", "href": "#", "attributes": { "data-test-attribute": "value", "data-test-attribute-2": "value-2" } } ] } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "text": "Edit", "href": "#", "attributes": { "data-test-attribute": "value", "data-test-attribute-2": "value-2" } } ] } } ] }) }} -
# single action with anchor
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "text": "First action", "href": "#" } ] } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "text": "First action", "href": "#" } ] } } ] }) }} -
# classes on items
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "text": "Edit", "href": "#", "classes": "govuk-link--no-visited-state" } ] } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "text": "Edit", "href": "#", "classes": "govuk-link--no-visited-state" } ] } } ] }) }} -
# empty items array
- Name
- Firstname Lastname
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [] } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [] } } ] }) }} -
# rows with classes
- Name
- Firstname Lastname
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "classes": "app-custom-class" } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "classes": "app-custom-class" } ] }) }} -
# summary card with custom classes
- Name
- Firstname Lastname
- Date of birth
- 13/08/1980
{ "card": { "classes": "custom-class" }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "card": { "classes": "custom-class" }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }) }} -
# summary card with custom attributes
- Name
- Firstname Lastname
- Date of birth
- 13/08/1980
{ "card": { "attributes": { "data-attribute-1": "value-1", "data-attribute-2": "value-2" } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "card": { "attributes": { "data-attribute-1": "value-1", "data-attribute-2": "value-2" } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }) }} -
# summary card with only 1 action
Undergraduate teaching assistant
- Name
- Firstname Lastname
- Date of birth
- 13/08/1980
{ "card": { "title": { "text": "Undergraduate teaching assistant" }, "actions": { "items": [ { "text": "My lonely action", "href": "#" } ] } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "card": { "title": { "text": "Undergraduate teaching assistant" }, "actions": { "items": [ { "text": "My lonely action", "href": "#" } ] } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }) }} -
# translated
- Gwybodaeth cyswllt
-
email@email.com
Address line 1
Address line 2
Address line 3
Address line 4
Address line 5 - Golygu gwybodaeth cyswllt
{ "rows": [ { "key": { "text": "Enw" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "href": "#", "html": "Golygu<span class=\"govuk-visually-hidden\"> enw</span>", "visuallyHiddenText": "" }, { "href": "#", "html": "Dileu<span class=\"govuk-visually-hidden\"> enw</span>", "visuallyHiddenText": "" } ] } }, { "key": { "text": "Dyddiad geni" }, "value": { "text": "13/08/1980" }, "actions": { "items": [ { "href": "#", "html": "Golygu<span class=\"govuk-visually-hidden\"> dyddiad geni</span>", "visuallyHiddenText": "" } ] } }, { "key": { "text": "Gwybodaeth cyswllt" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" }, "actions": { "items": [ { "href": "#", "html": "Golygu<span class=\"govuk-visually-hidden\"> gwybodaeth cyswllt</span>", "visuallyHiddenText": "" } ] } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Enw" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "href": "#", "html": "Golygu<span class=\"govuk-visually-hidden\"> enw</span>", "visuallyHiddenText": "" }, { "href": "#", "html": "Dileu<span class=\"govuk-visually-hidden\"> enw</span>", "visuallyHiddenText": "" } ] } }, { "key": { "text": "Dyddiad geni" }, "value": { "text": "13/08/1980" }, "actions": { "items": [ { "href": "#", "html": "Golygu<span class=\"govuk-visually-hidden\"> dyddiad geni</span>", "visuallyHiddenText": "" } ] } }, { "key": { "text": "Gwybodaeth cyswllt" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" }, "actions": { "items": [ { "href": "#", "html": "Golygu<span class=\"govuk-visually-hidden\"> gwybodaeth cyswllt</span>", "visuallyHiddenText": "" } ] } } ] }) }} -
# with some actions
- Date of birth
- 13/08/1980
- Contact information
-
email@email.com
Address line 1
Address line 2
Address line 3
Address line 4
Address line 5
{ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "name" }, { "href": "#", "text": "Delete", "visuallyHiddenText": "name" } ] } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } }, { "key": { "text": "Contact information" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "name" }, { "href": "#", "text": "Delete", "visuallyHiddenText": "name" } ] } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } }, { "key": { "text": "Contact information" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" } } ] }) }} -
# overridden-widths
- Contact information
-
email@email.com
Address line 1
Address line 2
Address line 3
Address line 4
Address line 5
{ "rows": [ { "key": { "classes": "govuk-!-width-one-half", "text": "Name" }, "value": { "classes": "govuk-!-width-one-quarter", "text": "Firstname Lastname" }, "actions": { "classes": "govuk-!-width-one-half", "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "name" }, { "href": "#", "text": "Delete", "visuallyHiddenText": "name" } ] } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "date of birth" } ] } }, { "key": { "text": "Contact information" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" }, "actions": { "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "contact information" }, { "href": "#", "text": "Change", "visuallyHiddenText": "contact information" } ] } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "rows": [ { "key": { "classes": "govuk-!-width-one-half", "text": "Name" }, "value": { "classes": "govuk-!-width-one-quarter", "text": "Firstname Lastname" }, "actions": { "classes": "govuk-!-width-one-half", "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "name" }, { "href": "#", "text": "Delete", "visuallyHiddenText": "name" } ] } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "date of birth" } ] } }, { "key": { "text": "Contact information" }, "value": { "html": "<p class=\"govuk-body\">\n email@email.com\n</p>\n<p class=\"govuk-body\">\n Address line 1<br>\n Address line 2<br>\n Address line 3<br>\n Address line 4<br>\n Address line 5\n</p>\n" }, "actions": { "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "contact information" }, { "href": "#", "text": "Change", "visuallyHiddenText": "contact information" } ] } } ] }) }} -
# as a summary card with a custom header level
Undergraduate teaching assistant
- Name
- Firstname Lastname
- Date of birth
- 13/08/1980
{ "card": { "title": { "text": "Undergraduate teaching assistant", "headingLevel": 3 } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ "card": { "title": { "text": "Undergraduate teaching assistant", "headingLevel": 3 } }, "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } } ] }) }}