{ "component": "summary-list", "fixtures": [ { "name": "default", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } }, { "key": { "text": "Contact information" }, "value": { "html": "

\n email@email.com\n

\n

\n Address line 1
\n Address line 2
\n Address line 3
\n Address line 4
\n Address line 5\n

\n" } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n \n
\n
\n Date of birth\n
\n
\n 13/08/1980\n
\n \n
\n \n \n \n
\n
\n Contact information\n
\n
\n

\n email@email.com\n

\n

\n Address line 1
\n Address line 2
\n Address line 3
\n Address line 4
\n Address line 5\n

\n
\n \n
\n \n \n
", "hidden": false }, { "name": "with actions", "options": { "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": "

\n email@email.com\n

\n

\n Address line 1
\n Address line 2
\n Address line 3
\n Address line 4
\n Address line 5\n

\n" }, "actions": { "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "contact information" }, { "href": "#", "text": "Change", "visuallyHiddenText": "contact information" } ] } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n
\n Date of birth\n
\n
\n 13/08/1980\n
\n \n
\n \n \n Change date of birth\n \n \n
\n \n
\n \n \n \n
\n
\n Contact information\n
\n
\n

\n email@email.com\n

\n

\n Address line 1
\n Address line 2
\n Address line 3
\n Address line 4
\n Address line 5\n

\n
\n \n
\n \n \n \n
\n \n
\n \n \n
", "hidden": false }, { "name": "with some actions", "options": { "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": "

\n email@email.com\n

\n

\n Address line 1
\n Address line 2
\n Address line 3
\n Address line 4
\n Address line 5\n

\n" } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n
\n Date of birth\n
\n
\n 13/08/1980\n
\n \n \n \n \n
\n \n \n \n
\n
\n Contact information\n
\n
\n

\n email@email.com\n

\n

\n Address line 1
\n Address line 2
\n Address line 3
\n Address line 4
\n Address line 5\n

\n
\n \n \n \n \n
\n \n \n
", "hidden": false }, { "name": "no-border", "options": { "classes": "moaland-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": "

\n email@email.com\n

\n

\n Address line 1
\n Address line 2
\n Address line 3
\n Address line 4
\n Address line 5\n

\n" } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n \n
\n
\n Date of birth\n
\n
\n 13/08/1980\n
\n \n
\n \n \n \n
\n
\n Contact information\n
\n
\n

\n email@email.com\n

\n

\n Address line 1
\n Address line 2
\n Address line 3
\n Address line 4
\n Address line 5\n

\n
\n \n
\n \n \n
", "hidden": false }, { "name": "no-border on last row", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, { "key": { "text": "Date of birth" }, "value": { "text": "13/08/1980" } }, { "key": { "text": "Contact information" }, "value": { "html": "

\n email@email.com\n

\n

\n Address line 1
\n Address line 2
\n Address line 3
\n Address line 4
\n Address line 5\n

\n" }, "classes": "moaland-summary-list__row--no-border" } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n \n
\n
\n Date of birth\n
\n
\n 13/08/1980\n
\n \n
\n \n \n \n
\n
\n Contact information\n
\n
\n

\n email@email.com\n

\n

\n Address line 1
\n Address line 2
\n Address line 3
\n Address line 4
\n Address line 5\n

\n
\n \n
\n \n \n
", "hidden": false }, { "name": "overridden-widths", "options": { "rows": [ { "key": { "classes": "moaland-!-width-one-half", "text": "Name" }, "value": { "classes": "moaland-!-width-one-quarter", "text": "Firstname Lastname" }, "actions": { "classes": "moaland-!-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": "

\n email@email.com\n

\n

\n Address line 1
\n Address line 2
\n Address line 3
\n Address line 4
\n Address line 5\n

\n" }, "actions": { "items": [ { "href": "#", "text": "Edit", "visuallyHiddenText": "contact information" }, { "href": "#", "text": "Change", "visuallyHiddenText": "contact information" } ] } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n
\n Date of birth\n
\n
\n 13/08/1980\n
\n \n
\n \n \n Change date of birth\n \n \n
\n \n
\n \n \n \n
\n
\n Contact information\n
\n
\n

\n email@email.com\n

\n

\n Address line 1
\n Address line 2
\n Address line 3
\n Address line 4
\n Address line 5\n

\n
\n \n
\n \n \n \n
\n \n
\n \n \n
", "hidden": false }, { "name": "check-your-answers", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Sarah Philips" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "name" } ] } }, { "key": { "text": "Date of birth" }, "value": { "text": "5 January 1978" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "date of birth" } ] } }, { "key": { "text": "Address" }, "value": { "html": "72 Guild Street
\nLondon
\nSE23 6FH\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "address" } ] } }, { "key": { "text": "Contact details" }, "value": { "html": "07700 900457
\nsarah.phillips@example.com\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "contact details" } ] } }, { "key": { "text": "Previous application number" }, "value": { "text": 502135326 }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "previous application number" } ] } }, { "key": { "text": "Licence type" }, "value": { "text": "For personal use" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "licence type" } ] } }, { "key": { "text": "Home address" }, "value": { "html": "

\n 72 Guild Street
\n London
\n SE23 6FH\n

\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "home address" } ] } }, { "key": { "text": "Licence period" }, "value": { "html": "

This is a longer paragraph of text provided by the user to provide additional information.

\n

This is a second paragraph of text provided by the user.

\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "licence period" } ] } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Sarah Philips\n
\n \n
\n \n \n Change name\n \n \n
\n \n
\n \n \n \n
\n
\n Date of birth\n
\n
\n 5 January 1978\n
\n \n
\n \n \n Change date of birth\n \n \n
\n \n
\n \n \n \n
\n
\n Address\n
\n
\n 72 Guild Street
\n London
\n SE23 6FH\n
\n \n
\n \n \n Change address\n \n \n
\n \n
\n \n \n \n
\n
\n Contact details\n
\n
\n 07700 900457
\n sarah.phillips@example.com\n
\n \n
\n \n \n Change contact details\n \n \n
\n \n
\n \n \n \n
\n
\n Previous application number\n
\n
\n 502135326\n
\n \n
\n \n \n Change previous application number\n \n \n
\n \n
\n \n \n \n
\n
\n Licence type\n
\n
\n For personal use\n
\n \n
\n \n \n Change licence type\n \n \n
\n \n
\n \n \n \n
\n
\n Home address\n
\n
\n

\n 72 Guild Street
\n London
\n SE23 6FH\n

\n
\n \n
\n \n \n Change home address\n \n \n
\n \n
\n \n \n \n
\n
\n Licence period\n
\n
\n

This is a longer paragraph of text provided by the user to provide additional information.

\n

This is a second paragraph of text provided by the user.

\n
\n \n
\n \n \n Change licence period\n \n \n
\n \n
\n \n \n
", "hidden": false }, { "name": "extreme", "options": { "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": "Coom" }, { "href": "#", "text": "Press" }, { "href": "#", "text": "Snap" }, { "href": "#", "text": "Work" }, { "href": "#", "text": "Quick" }, { "href": "#", "text": "Erase" } ] } }, { "key": { "text": "Long website address" }, "value": { "html": "https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "long website address" } ] } }, { "key": { "text": "Long email address" }, "value": { "html": "webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "long email address" } ] } }, { "key": { "text": "No wrapping allowed" }, "value": { "html": "

michelle.longish.name@example.com

\n" }, "actions": { "items": [ { "href": "#", "text": "Change", "visuallyHiddenText": "no wrapping allowed" } ] } }, { "key": { "text": "Pneumonoultramicroscopicsilicovolcanoconiosis" }, "value": { "html": "

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.\"

\n

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.

\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" } ] } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n 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\n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n
\n Long website address\n
\n
\n https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch\n
\n \n
\n \n \n Change long website address\n \n \n
\n \n
\n \n \n \n
\n
\n Long email address\n
\n
\n webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com\n
\n \n
\n \n \n Change long email address\n \n \n
\n \n
\n \n \n \n
\n
\n No wrapping allowed\n
\n
\n

michelle.longish.name@example.com

\n
\n \n
\n \n \n Change no wrapping allowed\n \n \n
\n \n
\n \n \n \n
\n
\n Pneumonoultramicroscopicsilicovolcanoconiosis\n
\n
\n

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.\"

\n

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.

\n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n
\n 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.\n
\n
\n The Great Gatsby\n
\n \n
\n \n \n \n
\n \n
\n \n \n
", "hidden": false }, { "name": "attributes", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } } ], "attributes": { "data-attribute-1": "value-1", "data-attribute-2": "value-2" } }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n
", "hidden": true }, { "name": "with falsey values", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" } }, null, false, "", { "key": { "text": "Name 2" }, "value": { "text": "Firstname2 Lastname2" } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n \n \n \n \n \n \n \n
\n
\n Name 2\n
\n
\n Firstname2 Lastname2\n
\n \n
\n \n \n
", "hidden": true }, { "name": "key with html", "options": { "rows": [ { "key": { "html": "Name" }, "value": { "html": "Firstname Lastname" } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n
", "hidden": true }, { "name": "key with classes", "options": { "rows": [ { "key": { "text": "Name", "classes": "app-custom-class" }, "value": { "text": "Firstname Lastname" } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n
", "hidden": true }, { "name": "value with html", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "html": "email@email.com" } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n email@email.com\n
\n \n
\n \n \n
", "hidden": true }, { "name": "actions href", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "href": "https://www.gov.uk", "text": "Go to GOV.MOA" } ] } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n Go to GOV.MOA\n \n
\n \n
\n \n \n
", "hidden": true }, { "name": "actions with html", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "html": "Edit name", "href": "#" } ] } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n Edit name\n \n
\n \n
\n \n \n
", "hidden": true }, { "name": "actions with classes", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "classes": "app-custom-class", "items": [ { "text": "Edit", "href": "/edit" } ] } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n Edit\n \n
\n \n
\n \n \n
", "hidden": true }, { "name": "actions with attributes", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "text": "Edit", "href": "#", "attributes": { "data-test-attribute": "value", "data-test-attribute-2": "value-2" } } ] } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n Edit\n \n
\n \n
\n \n \n
", "hidden": true }, { "name": "single action with anchor", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "text": "First action", "href": "#" } ] } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n First action\n \n
\n \n
\n \n \n
", "hidden": true }, { "name": "classes on items", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [ { "text": "Edit", "href": "#", "classes": "moaland-link--no-visited-state" } ] } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n Edit\n \n
\n \n
\n \n \n
", "hidden": true }, { "name": "empty items array", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "actions": { "items": [] } } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n
", "hidden": true }, { "name": "rows with classes", "options": { "rows": [ { "key": { "text": "Name" }, "value": { "text": "Firstname Lastname" }, "classes": "app-custom-class" } ] }, "html": "
\n \n \n
\n
\n Name\n
\n
\n Firstname Lastname\n
\n \n
\n \n \n
", "hidden": true } ] }