diff --git a/src/components/summary-list/index.md.njk b/src/components/summary-list/index.md.njk index fed17b4f44..6d80a1f288 100644 --- a/src/components/summary-list/index.md.njk +++ b/src/components/summary-list/index.md.njk @@ -44,6 +44,10 @@ To give more context, add visually hidden text to the links. This means a screen {{ example({group: "components", item: "summary-list", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second"}) }} +If you have a mix of rows with and without actions, add the `govuk-summary-list__row--no-actions` modifier class to the rows without actions. + +{{ example({group: "components", item: "summary-list", example: "mixed-actions", html: true, nunjucks: true, open: false}) }} + ### Removing the borders The summary list includes some separating borders to help users read each row and its action. diff --git a/src/components/summary-list/mixed-actions/index.njk b/src/components/summary-list/mixed-actions/index.njk new file mode 100644 index 0000000000..8a8ff669f4 --- /dev/null +++ b/src/components/summary-list/mixed-actions/index.njk @@ -0,0 +1,70 @@ +--- +title: Summary list with a mix of rows with and without actions +layout: layout-example.njk +--- + +{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} + +{{ govukSummaryList({ + rows: [ + { + key: { + text: "Name" + }, + value: { + text: "Sarah Philips" + } + }, + { + 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
London
SE23 6FH" + }, + actions: { + items: [ + { + href: "#", + text: "Change", + visuallyHiddenText: "address" + } + ] + } + }, + { + key: { + text: "Contact details" + }, + value: { + html: '

07700 900457

sarah.phillips@example.com

' + }, + actions: { + items: [ + { + href: "#", + text: "Change", + visuallyHiddenText: "contact details" + } + ] + } + } + ] +}) }}