Summary list – GOV.UK Design System

<!DOCTYPE html> <html lang="en" class="govuk-template"> <head> <meta charset="utf-8"> <title>Summary list – GOV.UK Design System</title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="theme-color" content="#0b0c0c"> <link rel="icon" sizes="48x48" href="/assets/images/favicon.ico"> <link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml"> <link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="#0b0c0c"> <link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png"> <link rel="manifest" href="/assets/manifest.json"> <meta name="og:title" content="Summary list"> <meta name="description" content="Use the summary list to summarise information, for example, a user’s responses at the end of a form."> <meta name="og:description" content="Use the summary list to summarise information, for example, a user’s responses at the end of a form."> <link rel="canonical" href="https://design-system.service.gov.uk/components/summary-list/"> <link href="/stylesheets/main-c4a333404e1796065e06bfef0e1fd954.css" rel="stylesheet" media="all"> <meta property="og:image" content="https://design-system.service.gov.uk/assets/images/govuk-opengraph-image.png"> </head> <body class="govuk-template__body" data-module="app-navigation"> <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script> <a id="top"></a> <script> /** * If cookie policy changes and/or the user preferences object format needs to * change, bump this version up afterwards. The user should then be shown the * banner again to consent to the new policy. * * Note that because isValidCookieConsent checks that the version in the user's * cookie is equal to or greater than this number, you should be careful to * check backwards compatibility when changing the object format. */ window.GDS_CONSENT_COOKIE_VERSION = 2; </script> <div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on GOV.UK Design System" hidden data-module="govuk-cookie-banner" data-cookie-category="analytics"> <div class="govuk-cookie-banner__message app-width-container js-cookie-banner-message govuk-width-container"> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <h2 class="govuk-cookie-banner__heading govuk-heading-m"> Cookies on GOV.UK Design System </h2> <div class="govuk-cookie-banner__content"> We’d like to use analytics cookies so we can understand how you use the Design System and make improvements. We also use essential cookies to remember if you’ve accepted analytics cookies. </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-accept" data-module="govuk-button"> Accept analytics cookies </button> <button type="button" class="govuk-button js-cookie-banner-reject" data-module="govuk-button"> Reject analytics cookies </button> <a class="govuk-link" href="/cookies/">View cookies</a> </div> </div> <div class="govuk-cookie-banner__message js-cookie-banner-confirmation-accept app-width-container govuk-width-container" role="alert" hidden> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <div class="govuk-cookie-banner__content"> You’ve accepted analytics cookies. You can <a class="govuk-link" href="/cookies/">change your cookie settings</a> at any time. </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-hide js-cookie-banner-hide--accept" data-module="govuk-button"> Hide cookie message </button> </div> </div> <div class="govuk-cookie-banner__message js-cookie-banner-confirmation-reject app-width-container govuk-width-container" role="alert" hidden> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <div class="govuk-cookie-banner__content"> You’ve rejected analytics cookies. You can <a class="govuk-link" href="/cookies/">change your cookie settings</a> at any time. </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-hide js-cookie-banner-hide--reject" data-module="govuk-button"> Hide cookie message </button> </div> </div> </div> <script> (function () { // Skip early setup when cookie banner component is not supported if (!('noModule' in HTMLScriptElement.prototype)) { return } /** * Check the cookie preferences object. * * If the consent object is not present, malformed, or incorrect version, * returns false, otherwise returns true. * * This is also duplicated in cookie-functions.js - the two need to be kept in sync */ function isValidConsentCookie (options) { return (options && options.version >= window.GDS_CONSENT_COOKIE_VERSION) } function categoryIsNull (options) { return (options && options.analytics === null) } // Don't show the banner on the cookies page if (window.location.pathname !== "/cookies/") { // Show the banner if there is no consent cookie or if it is outdated var currentConsentCookie = document.cookie.match(new RegExp('(^| )design_system_cookies_policy=([^;]+)')) const cookieData = currentConsentCookie && JSON.parse(currentConsentCookie[2]); const cookieNotSet = (!currentConsentCookie || !isValidConsentCookie(cookieData)) const categoryNotSet = isValidConsentCookie(cookieData) && categoryIsNull(cookieData) if (cookieNotSet || categoryNotSet) { var cookieBanner = document.querySelector("[data-cookie-category='analytics']") cookieBanner.removeAttribute('hidden') } } })() </script> <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a> <header class="govuk-header govuk-header--full-width-border" role="banner"> <div class="govuk-header__container app-width-container"> <div class="govuk-header__logo app-header-logo"> <a href="/" class="govuk-header__link govuk-header__link--homepage"> <svg focusable="false" role="img" class="govuk-header__logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 30" height="30" width="148" aria-label="GOV.UK" > <title>GOV.UK</title> <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path> </svg> Design System </a> </div> <div class="app-site-search" data-module="app-search" data-search-index="/search-index-0864382ee8f73428a07ab1782893f578.json"> <label class="govuk-visually-hidden" for="app-site-search__input">Search Design system</label> <a class="app-site-search__link govuk-link" href="/sitemap/">Sitemap</a> </div> <button type="button" class="govuk-header__menu-button app-navigation__menu-button js-app-navigation__toggler" aria-controls="app-navigation" hidden> Menu </button> </div> </header> <nav id="app-navigation" class="app-navigation js-app-navigation govuk-clearfix" role="navigation" aria-labelledby="app-navigation-heading"> <h2 class="govuk-visually-hidden" id="app-navigation-heading">Menu</h2> <ul class="app-navigation__list app-width-container"> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/get-started/"> Get started </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Get started </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Get started" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/"> Get started overview </a> </li> <li> <h3 class="app-navigation__theme">Setup guides</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/prototyping/"> Prototyping </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/production/"> Production </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">How to guides</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/labels-legends-headings/"> Making labels and legends headings </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/extending-and-modifying-components/"> Extending and modifying components in production </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/focus-states/"> Understanding focus state styles </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/new-type-scale/"> Updating your service to use the new type scale </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/styles/"> Styles </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Styles </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Styles" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/"> Styles overview </a> </li> <li> <h3 class="app-navigation__theme">Page structure</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/page-template/"> Page template </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/layout/"> Layout </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/spacing/"> Spacing </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/section-break/"> Section break </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Typography</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/typeface/"> Typeface </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/type-scale/"> Type scale </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/headings/"> Headings </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/paragraphs/"> Paragraphs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/links/"> Links </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/lists/"> Lists </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/font-override-classes/"> Font override classes </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Visual elements</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/colour/"> Colour </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/images/"> Images </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item app-navigation__list-item--current"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/components/"> Components </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Components </button>  <ul class="app-navigation__subnav js-app-navigation__subnav app-navigation__subnav--active" aria-label="Components" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/"> Components overview </a> </li> <li> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/accordion/"> Accordion </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/back-link/"> Back link </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/breadcrumbs/"> Breadcrumbs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/button/"> Button </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/character-count/"> Character count </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/checkboxes/"> Checkboxes </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/cookie-banner/"> Cookie banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/date-input/"> Date input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/details/"> Details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-message/"> Error message </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-summary/"> Error summary </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/exit-this-page/"> Exit this page </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/fieldset/"> Fieldset </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/file-upload/"> File upload </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/footer/"> GOV.UK footer </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/header/"> GOV.UK header </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/inset-text/"> Inset text </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/notification-banner/"> Notification banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/pagination/"> Pagination </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/panel/"> Panel </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/password-input/"> Password input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/phase-banner/"> Phase banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/radios/"> Radios </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/select/"> Select </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/service-navigation/"> Service navigation </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/skip-link/"> Skip link </a> </li> <li class="app-navigation__subnav-item app-navigation__subnav-item--current"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/summary-list/"> Summary list </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/table/"> Table </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tabs/"> Tabs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tag/"> Tag </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/task-list/"> Task list </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/"> Text input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/textarea/"> Textarea </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/warning-text/"> Warning text </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/patterns/"> Patterns </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Patterns </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Patterns" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/"> Patterns overview </a> </li> <li> <h3 class="app-navigation__theme">Ask users for…</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/addresses/"> Addresses </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/bank-details/"> Bank details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/dates/"> Dates </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/email-addresses/"> Email addresses </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/equality-information/"> Equality information </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/gender-or-sex/"> Gender or sex </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/names/"> Names </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/national-insurance-numbers/"> National Insurance numbers </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/passwords/"> Passwords </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/payment-card-details/"> Payment card details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/phone-numbers/"> Phone numbers </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Help users to…</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/check-a-service-is-suitable/"> Check a service is suitable </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/check-answers/"> Check answers </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/complete-multiple-tasks/"> Complete multiple tasks </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirm-a-phone-number/"> Confirm a phone number </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirm-an-email-address/"> Confirm an email address </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/contact-a-department-or-service-team/"> Contact a department or service team </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/create-a-username/"> Create a username </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/create-accounts/"> Create accounts </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/exit-a-page-quickly/"> Exit a page quickly </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/navigate-a-service/"> Navigate a service </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/start-using-a-service/"> Start using a service </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/validation/"> Recover from validation errors </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Pages</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirmation-pages/"> Confirmation pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/cookies-page/"> Cookies page </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/page-not-found-pages/"> Page not found pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/problem-with-the-service-pages/"> There is a problem with the service pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/question-pages/"> Question pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/service-unavailable-pages/"> Service unavailable pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/step-by-step-navigation/"> Step by step navigation </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/community/"> Community </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Community </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Community" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/"> Community overview </a> </li> <li> <h3 class="app-navigation__theme">What we’re working on</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/upcoming-components-patterns/"> Upcoming components and patterns </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/roadmap/"> Roadmap </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Ways to get involved</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/share-research-findings/"> Share findings about your users </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/propose-a-component-or-pattern/"> Propose a component or pattern </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/develop-a-component-or-pattern/"> Develop a component or pattern </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/propose-a-content-change-using-github/"> Propose a content change using GitHub </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">How we work</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/community-principles/"> Community principles </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/contribution-criteria/"> Contribution criteria </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-working-group/"> Design System working group </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/blogs-talks-podcasts/"> Blog posts, videos and podcasts </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Resources</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/resources-and-tools/"> Resources and tools </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Events and workshops</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day/"> Design System Day Events </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2022/"> Design System Day 2022 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2023/"> Design System Day 2023 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2024/"> Design System Day 2024 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/code-of-conduct/"> Code of Conduct </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/accessibility/"> Accessibility </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Accessibility </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Accessibility" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/"> Accessibility overview </a> </li> <li> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/wcag-2.2/"> Changes to the Design System to meet WCAG 2.2 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/accessibility-strategy/"> Accessibility strategy </a> </li> </ul> </li> </ul> </li> </ul> </nav> <div class="app-split-pane app-width-container"> <div class="app-split-pane__nav">  <nav class="app-subnav" aria-labelledby="app-subnav-heading"> <h2 class="govuk-visually-hidden" id="app-subnav-heading">Pages in this section</h2> <ul class="app-subnav__section"> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/accordion/"> Accordion </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/back-link/"> Back link </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/breadcrumbs/"> Breadcrumbs </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/button/"> Button </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/character-count/"> Character count </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/checkboxes/"> Checkboxes </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/cookie-banner/"> Cookie banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/date-input/"> Date input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/details/"> Details </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-message/"> Error message </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-summary/"> Error summary </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/exit-this-page/"> Exit this page </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/fieldset/"> Fieldset </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/file-upload/"> File upload </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/footer/"> GOV.UK footer </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/header/"> GOV.UK header </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/inset-text/"> Inset text </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/notification-banner/"> Notification banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/pagination/"> Pagination </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/panel/"> Panel </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/password-input/"> Password input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/phase-banner/"> Phase banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/radios/"> Radios </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/select/"> Select </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/service-navigation/"> Service navigation </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/skip-link/"> Skip link </a> </li> <li class="app-subnav__section-item app-subnav__section-item--current"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/summary-list/" aria-current="page"> Summary list </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/table/"> Table </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tabs/"> Tabs </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tag/"> Tag </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/task-list/"> Task list </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/"> Text input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/textarea/"> Textarea </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/warning-text/"> Warning text </a> </li> </ul> </nav> </div> <div class="app-split-pane__content"> <main id="main-content" class="app-content" role="main"> Components <h1 class="govuk-heading-xl"> Summary list </h1> <div class="app-prose-scope"> Use a summary list to summarise information, for example, a user’s responses at the end of a form. <div class="govuk-inset-text app-wcag-callout"> WCAG 2.2 <h2> New WCAG 2.2 criteria affect this component </h2> To use ‘Summary list’ and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria: <ul class="govuk-list"> <li><a class="govuk-link" href="#wcag-interact-row-actions">make sure users can interact with row actions</a></li> <li><a class="govuk-link" href="#wcag-change-answers">make sure users can change information they've previously given in an answer</a></li> </ul> See the full list of <a class="govuk-link" href="/accessibility/wcag-2.2/#components-and-patterns-affected-in-the-design-system">components and patterns affected by WCAG 2.2</a>. </div> <div class="app-example-wrapper" id="summary-list-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/summary-list/default/' target='_blank'> Open this example in a new tab: summary list </a> </div> <iframe title="Summary list example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/summary-list/default/index.html" loading="eager"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-example-html" role="tab" aria-controls="summary-list-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-example-nunjucks" role="tab" aria-controls="summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#summary-list-example-html" aria-controls="summary-list-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="summary-list-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><dl class="govuk-summary-list"> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Name </dt> <dd class="govuk-summary-list__value"> Sarah Philips </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> name</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Date of birth </dt> <dd class="govuk-summary-list__value"> 5 January 1978 </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> date of birth</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Address </dt> <dd class="govuk-summary-list__value"> 72 Guild Street<br>London<br>SE23 6FH </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> address</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Contact details </dt> <dd class="govuk-summary-list__value"> <p class="govuk-body">07700 900457</p> <p class="govuk-body">sarah.phillips@example.com</p> </dd> <dd class="govuk-summary-list__actions"> <ul class="govuk-summary-list__actions-list"> <li class="govuk-summary-list__actions-list-item"> <a class="govuk-link" href="#">Add<span class="govuk-visually-hidden"> contact details</span></a> </li> <li class="govuk-summary-list__actions-list-item"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> contact details</span></a> </li> </ul> </dd> </div> </dl></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#summary-list-example-nunjucks" aria-controls="summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="summary-list-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-summary-list-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-summary-list-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the summary list component. <a href="#options-summary-list-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">card</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to wrap a summary card around the summary list component. If any of these options are present, a summary card will wrap around the summary list. <a href="#options-summary-list-example--card"> See macro options for card</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the row <code>div</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">key</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The reference content (key) for each row item in the summary list component. <a href="#options-summary-list-example--rows-key"> See macro options for rows key</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The value for each row item in the summary list component. <a href="#options-summary-list-example--rows-value"> See macro options for rows value</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content for each row item in the summary list component. <a href="#options-summary-list-example--rows-actions"> See macro options for rows actions</a>. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-example--rows-key"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>key</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the key wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-example--rows-value"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>value</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the value wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-example--rows-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items within the row item of the summary list component. <a href="#options-summary-list-example--rows-actions-items"> See macro options for rows actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-example--rows-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-example--card"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>card</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Data for the summary card header. <a href="#options-summary-list-example--card-title"> See macro options for card title</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content shown in the header of each summary card wrapped around the summary list component. <a href="#options-summary-list-example--card-actions"> See macro options for card actions</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-example--card-title"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>title</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">headingLevel</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Heading level, from <code>1</code> to <code>6</code>. Default is <code>2</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the title wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-example--card-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items shown in the header within the summary card wrapped around the summary list component. <a href="#options-summary-list-example--card-actions-items"> See macro options for card actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-example--card-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for card actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ 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 London SE23 6FH" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "address" } ] } }, { key: { text: "Contact details" }, value: { html: '07700 900457sarah.phillips@example.com' }, actions: { items: [ { href: "#", text: "Add", visuallyHiddenText: "contact details" }, { href: "#", text: "Change", visuallyHiddenText: "contact details" } ] } } ] }) }}</code></pre> </div> </div> </div> <h2 id="when-to-use-this-component">When to use this component</h2> Use a summary list to show information as a list of key facts. You can use it to display metadata like ‘Last updated’ with a date like ‘22 June 2018’, or to summarise a user’s responses at the end of a form like the <a href="/patterns/check-answers/">Check answers pattern</a>. <a href="#summary-cards">Summary cards are a variant within this component</a>. You can use summary cards to show multiple summary lists that describe the same type of thing, such as people. You can also add card actions that apply to the entire summary list. <h2 id="when-not-to-use-this-component">When not to use this component</h2> The summary list uses the description list (<code><dl></code>) HTML element, so only use it to present information that has a key and at least one value. Do not use it for tabular data or a simple list of information or tasks, like a <a href="/components/task-list/">Task list component</a>. For those use a <code><table></code>, <code><ul></code> or <code><ol></code>. <h2 id="how-it-works">How it works</h2> Each row of a summary list is made up of a: <ul> <li>‘key’ that’s a description or label of a piece of information, like “Name”</li> <li>‘value’ which is the piece of information itself, such as “John Smith”</li> </ul> You can show a single or multiple summary lists on a page. If you’re showing multiple summary lists on a page, you can add structure by using headings or summary cards. There are 2 ways to use the summary list component. You can use HTML or, if you’re using <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> or the <a href="https://prototype-kit.service.gov.uk">GOV.UK Prototype Kit</a>, you can use the Nunjucks macro. <div class="app-example-wrapper" id="without-actions-summary-list-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/summary-list/without-actions/' target='_blank'> Open this example in a new tab: without actions – summary list </a> </div> <iframe title="Without actions – Summary list example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/summary-list/without-actions/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#without-actions-summary-list-example-html" role="tab" aria-controls="without-actions-summary-list-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#without-actions-summary-list-example-nunjucks" role="tab" aria-controls="without-actions-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#without-actions-summary-list-example-html" aria-controls="without-actions-summary-list-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="without-actions-summary-list-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><dl class="govuk-summary-list"> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Name </dt> <dd class="govuk-summary-list__value"> Sarah Philips </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Date of birth </dt> <dd class="govuk-summary-list__value"> 5 January 1978 </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Address </dt> <dd class="govuk-summary-list__value"> 72 Guild Street<br>London<br>SE23 6FH </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Contact details </dt> <dd class="govuk-summary-list__value"> <p class="govuk-body">07700 900457</p> <p class="govuk-body">sarah.phillips@example.com</p> </dd> </div> </dl></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#without-actions-summary-list-example-nunjucks" aria-controls="without-actions-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="without-actions-summary-list-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-without-actions-summary-list-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-without-actions-summary-list-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the summary list component. <a href="#options-without-actions-summary-list-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">card</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to wrap a summary card around the summary list component. If any of these options are present, a summary card will wrap around the summary list. <a href="#options-without-actions-summary-list-example--card"> See macro options for card</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-actions-summary-list-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the row <code>div</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">key</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The reference content (key) for each row item in the summary list component. <a href="#options-without-actions-summary-list-example--rows-key"> See macro options for rows key</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The value for each row item in the summary list component. <a href="#options-without-actions-summary-list-example--rows-value"> See macro options for rows value</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content for each row item in the summary list component. <a href="#options-without-actions-summary-list-example--rows-actions"> See macro options for rows actions</a>. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-actions-summary-list-example--rows-key"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>key</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the key wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-actions-summary-list-example--rows-value"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>value</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the value wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-actions-summary-list-example--rows-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items within the row item of the summary list component. <a href="#options-without-actions-summary-list-example--rows-actions-items"> See macro options for rows actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-actions-summary-list-example--rows-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-actions-summary-list-example--card"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>card</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Data for the summary card header. <a href="#options-without-actions-summary-list-example--card-title"> See macro options for card title</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content shown in the header of each summary card wrapped around the summary list component. <a href="#options-without-actions-summary-list-example--card-actions"> See macro options for card actions</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-actions-summary-list-example--card-title"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>title</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">headingLevel</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Heading level, from <code>1</code> to <code>6</code>. Default is <code>2</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the title wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-actions-summary-list-example--card-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items shown in the header within the summary card wrapped around the summary list component. <a href="#options-without-actions-summary-list-example--card-actions-items"> See macro options for card actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-actions-summary-list-example--card-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for card actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-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" } }, { key: { text: "Address" }, value: { html: "72 Guild Street London SE23 6FH" } }, { key: { text: "Contact details" }, value: { html: '07700 900457sarah.phillips@example.com' } } ] }) }}</code></pre> </div> </div> </div> <h3 id="adding-actions-to-each-row">Adding actions to each row</h3> You can add ‘row actions’ to a summary list. For example, you can help users go back and edit an answer by adding a ‘change’ link. When navigating visually, the borders above and below each row help to show which row action is tied to which piece of information. There’s a few things to keep in mind to ensure that users can successfully use row actions. <div class="app-wcag-note" id="wcag-interact-row-actions" role="note"> WCAG 2.2 Make sure any ‘action links’ are at least 24px by 24px in size, or have adequate spacing. This is to make sure users can easily interact with the links. This relates to <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.2 success criterion 2.5.8 Target size (minimum)</a>. </div> <div class="app-wcag-note" id="wcag-change-answers" role="note"> WCAG 2.2 If a user decides to go back to a previous answer through a card or row action, make sure information they have already entered is pre-populated. Do not pre-populate if the information is no longer valid, or when pre-populating would be a major safety or security concern. This is to comply with <a href="https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html">WCAG 2.2 success criterion 3.3.7 Redundant entry</a>. </div> Assistive technology users, including those who use a screen reader, might hear a row action link out of context and might not know what it will do. To give more context, add visually hidden text to the links. This means a screen reader user will hear the row action and the ‘key’ label for the information it will affect, like ‘Change name’ or ‘Change date of birth’. <div class="app-example-wrapper" id="summary-list-second-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/summary-list/default/' target='_blank'> Open this example in a new tab: summary list second </a> </div> <iframe title="Summary list second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/summary-list/default/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-second-example-html" role="tab" aria-controls="summary-list-second-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-second-example-nunjucks" role="tab" aria-controls="summary-list-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#summary-list-second-example-html" aria-controls="summary-list-second-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="summary-list-second-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><dl class="govuk-summary-list"> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Name </dt> <dd class="govuk-summary-list__value"> Sarah Philips </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> name</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Date of birth </dt> <dd class="govuk-summary-list__value"> 5 January 1978 </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> date of birth</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Address </dt> <dd class="govuk-summary-list__value"> 72 Guild Street<br>London<br>SE23 6FH </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> address</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Contact details </dt> <dd class="govuk-summary-list__value"> <p class="govuk-body">07700 900457</p> <p class="govuk-body">sarah.phillips@example.com</p> </dd> <dd class="govuk-summary-list__actions"> <ul class="govuk-summary-list__actions-list"> <li class="govuk-summary-list__actions-list-item"> <a class="govuk-link" href="#">Add<span class="govuk-visually-hidden"> contact details</span></a> </li> <li class="govuk-summary-list__actions-list-item"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> contact details</span></a> </li> </ul> </dd> </div> </dl></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#summary-list-second-example-nunjucks" aria-controls="summary-list-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="summary-list-second-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-summary-list-second-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-summary-list-second-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the summary list component. <a href="#options-summary-list-second-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">card</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to wrap a summary card around the summary list component. If any of these options are present, a summary card will wrap around the summary list. <a href="#options-summary-list-second-example--card"> See macro options for card</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-second-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the row <code>div</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">key</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The reference content (key) for each row item in the summary list component. <a href="#options-summary-list-second-example--rows-key"> See macro options for rows key</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The value for each row item in the summary list component. <a href="#options-summary-list-second-example--rows-value"> See macro options for rows value</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content for each row item in the summary list component. <a href="#options-summary-list-second-example--rows-actions"> See macro options for rows actions</a>. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-second-example--rows-key"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>key</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the key wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-second-example--rows-value"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>value</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the value wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-second-example--rows-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items within the row item of the summary list component. <a href="#options-summary-list-second-example--rows-actions-items"> See macro options for rows actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-second-example--rows-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-second-example--card"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>card</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Data for the summary card header. <a href="#options-summary-list-second-example--card-title"> See macro options for card title</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content shown in the header of each summary card wrapped around the summary list component. <a href="#options-summary-list-second-example--card-actions"> See macro options for card actions</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-second-example--card-title"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>title</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">headingLevel</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Heading level, from <code>1</code> to <code>6</code>. Default is <code>2</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the title wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-second-example--card-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items shown in the header within the summary card wrapped around the summary list component. <a href="#options-summary-list-second-example--card-actions-items"> See macro options for card actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-second-example--card-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for card actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ 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 London SE23 6FH" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "address" } ] } }, { key: { text: "Contact details" }, value: { html: '07700 900457sarah.phillips@example.com' }, actions: { items: [ { href: "#", text: "Add", visuallyHiddenText: "contact details" }, { href: "#", text: "Change", visuallyHiddenText: "contact details" } ] } } ] }) }}</code></pre> </div> </div> </div> <h4 id="showing-rows-with-and-without-actions">Showing rows with and without actions</h4> If you’re showing a mix of rows (where some rows include actions and some do not), add the <code>govuk-summary-list__row--no-actions</code> modifier class to the rows without actions. This is to ensure the bottom border is drawn correctly in some browsers. <div class="app-example-wrapper" id="summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/summary-list/mixed-actions/' target='_blank'> Open this example in a new tab: summary list with a mix of rows with and without actions – summary list </a> </div> <iframe title="Summary list with a mix of rows with and without actions – Summary list example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/summary-list/mixed-actions/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example-html" role="tab" aria-controls="summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example-nunjucks" role="tab" aria-controls="summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example-html" aria-controls="summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><dl class="govuk-summary-list"> <div class="govuk-summary-list__row govuk-summary-list__row--no-actions"> <dt class="govuk-summary-list__key"> Name </dt> <dd class="govuk-summary-list__value"> Sarah Philips </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Date of birth </dt> <dd class="govuk-summary-list__value"> 5 January 1978 </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> date of birth</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Address </dt> <dd class="govuk-summary-list__value"> 72 Guild Street<br>London<br>SE23 6FH </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> address</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Contact details </dt> <dd class="govuk-summary-list__value"> <p class="govuk-body">07700 900457</p> <p class="govuk-body">sarah.phillips@example.com</p> </dd> <dd class="govuk-summary-list__actions"> <ul class="govuk-summary-list__actions-list"> <li class="govuk-summary-list__actions-list-item"> <a class="govuk-link" href="#">Add<span class="govuk-visually-hidden"> contact details</span></a> </li> <li class="govuk-summary-list__actions-list-item"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> contact details</span></a> </li> </ul> </dd> </div> </dl></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example-nunjucks" aria-controls="summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the summary list component. <a href="#options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">card</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to wrap a summary card around the summary list component. If any of these options are present, a summary card will wrap around the summary list. <a href="#options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--card"> See macro options for card</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the row <code>div</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">key</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The reference content (key) for each row item in the summary list component. <a href="#options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--rows-key"> See macro options for rows key</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The value for each row item in the summary list component. <a href="#options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--rows-value"> See macro options for rows value</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content for each row item in the summary list component. <a href="#options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--rows-actions"> See macro options for rows actions</a>. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--rows-key"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>key</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the key wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--rows-value"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>value</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the value wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--rows-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items within the row item of the summary list component. <a href="#options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--rows-actions-items"> See macro options for rows actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--rows-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--card"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>card</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Data for the summary card header. <a href="#options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--card-title"> See macro options for card title</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content shown in the header of each summary card wrapped around the summary list component. <a href="#options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--card-actions"> See macro options for card actions</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--card-title"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>title</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">headingLevel</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Heading level, from <code>1</code> to <code>6</code>. Default is <code>2</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the title wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--card-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items shown in the header within the summary card wrapped around the summary list component. <a href="#options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--card-actions-items"> See macro options for card actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-summary-list-example--card-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for card actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-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 900457sarah.phillips@example.com' }, actions: { items: [ { href: "#", text: "Add", visuallyHiddenText: "contact details" }, { href: "#", text: "Change", visuallyHiddenText: "contact details" } ] } } ] }) }}</code></pre> </div> </div> </div> <h3 id="removing-the-borders">Removing the borders</h3> The summary list includes separating borders to help users by joining the information on each row and its action together. Think carefully before you remove row borders. Borders help many users find and read information that’s laid out in rows, especially users who zoom in on pages or use assistive technologies to magnify their screen. If your summary list does not have any actions, you can choose to remove the separating borders with the <code>govuk-summary-list--no-border</code> class. <div class="app-example-wrapper" id="without-borders-summary-list-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/summary-list/without-borders/' target='_blank'> Open this example in a new tab: without borders – summary list </a> </div> <iframe title="Without borders – Summary list example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/summary-list/without-borders/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#without-borders-summary-list-example-html" role="tab" aria-controls="without-borders-summary-list-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#without-borders-summary-list-example-nunjucks" role="tab" aria-controls="without-borders-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#without-borders-summary-list-example-html" aria-controls="without-borders-summary-list-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="without-borders-summary-list-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><dl class="govuk-summary-list govuk-summary-list--no-border"> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Name </dt> <dd class="govuk-summary-list__value"> Sarah Philips </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Date of birth </dt> <dd class="govuk-summary-list__value"> 5 January 1978 </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Address </dt> <dd class="govuk-summary-list__value"> 72 Guild Street<br>London<br>SE23 6FH </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Contact details </dt> <dd class="govuk-summary-list__value"> <p class="govuk-body">07700 900457</p> <p class="govuk-body">sarah.phillips@example.com</p> </dd> </div> </dl></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#without-borders-summary-list-example-nunjucks" aria-controls="without-borders-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="without-borders-summary-list-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-without-borders-summary-list-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-without-borders-summary-list-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the summary list component. <a href="#options-without-borders-summary-list-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">card</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to wrap a summary card around the summary list component. If any of these options are present, a summary card will wrap around the summary list. <a href="#options-without-borders-summary-list-example--card"> See macro options for card</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-borders-summary-list-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the row <code>div</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">key</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The reference content (key) for each row item in the summary list component. <a href="#options-without-borders-summary-list-example--rows-key"> See macro options for rows key</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The value for each row item in the summary list component. <a href="#options-without-borders-summary-list-example--rows-value"> See macro options for rows value</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content for each row item in the summary list component. <a href="#options-without-borders-summary-list-example--rows-actions"> See macro options for rows actions</a>. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-borders-summary-list-example--rows-key"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>key</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the key wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-borders-summary-list-example--rows-value"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>value</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the value wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-borders-summary-list-example--rows-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items within the row item of the summary list component. <a href="#options-without-borders-summary-list-example--rows-actions-items"> See macro options for rows actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-borders-summary-list-example--rows-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-borders-summary-list-example--card"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>card</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Data for the summary card header. <a href="#options-without-borders-summary-list-example--card-title"> See macro options for card title</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content shown in the header of each summary card wrapped around the summary list component. <a href="#options-without-borders-summary-list-example--card-actions"> See macro options for card actions</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-borders-summary-list-example--card-title"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>title</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">headingLevel</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Heading level, from <code>1</code> to <code>6</code>. Default is <code>2</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the title wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-borders-summary-list-example--card-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items shown in the header within the summary card wrapped around the summary list component. <a href="#options-without-borders-summary-list-example--card-actions-items"> See macro options for card actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-without-borders-summary-list-example--card-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for card actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ classes: "govuk-summary-list--no-border", rows: [ { key: { text: "Name" }, value: { text: "Sarah Philips" } }, { key: { text: "Date of birth" }, value: { text: "5 January 1978" } }, { key: { text: "Address" }, value: { html: "72 Guild Street London SE23 6FH" } }, { key: { text: "Contact details" }, value: { html: '07700 900457sarah.phillips@example.com' } } ] }) }}</code></pre> </div> </div> </div> To remove borders on a single row, use the <code>govuk-summary-list__row--no-border</code> class. <h3 id="showing-missing-information">Showing missing information</h3> In some contexts, you might need to show rows that have missing information. This can happen when: <ul> <li>a user returns to an incomplete journey</li> <li>you’ve added or changed the questions in a service.</li> </ul> Show a link to the appropriate question page in the <code>value</code> column so the user can enter the missing information, instead of showing a ‘change’ link on that row. <div class="app-example-wrapper" id="summary-list-with-missing-information-summary-list-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/summary-list/with-missing-information/' target='_blank'> Open this example in a new tab: summary list with missing information – summary list </a> </div> <iframe title="Summary list with missing information – Summary list example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/summary-list/with-missing-information/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-with-missing-information-summary-list-example-html" role="tab" aria-controls="summary-list-with-missing-information-summary-list-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-with-missing-information-summary-list-example-nunjucks" role="tab" aria-controls="summary-list-with-missing-information-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#summary-list-with-missing-information-summary-list-example-html" aria-controls="summary-list-with-missing-information-summary-list-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="summary-list-with-missing-information-summary-list-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><dl class="govuk-summary-list"> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Name </dt> <dd class="govuk-summary-list__value"> Sarah Philips </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> name</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Date of birth </dt> <dd class="govuk-summary-list__value"> 5 January 1978 </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> date of birth</span></a> </dd> </div> <div class="govuk-summary-list__row govuk-summary-list__row--no-actions"> <dt class="govuk-summary-list__key"> Contact information </dt> <dd class="govuk-summary-list__value"> <a href="#" class="govuk-link">Enter contact information</a> </dd> </div> <div class="govuk-summary-list__row govuk-summary-list__row--no-actions"> <dt class="govuk-summary-list__key"> Contact details </dt> <dd class="govuk-summary-list__value"> <a href="#" class="govuk-link">Enter contact details</a> </dd> </div> </dl></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#summary-list-with-missing-information-summary-list-example-nunjucks" aria-controls="summary-list-with-missing-information-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="summary-list-with-missing-information-summary-list-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-summary-list-with-missing-information-summary-list-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-summary-list-with-missing-information-summary-list-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the summary list component. <a href="#options-summary-list-with-missing-information-summary-list-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">card</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to wrap a summary card around the summary list component. If any of these options are present, a summary card will wrap around the summary list. <a href="#options-summary-list-with-missing-information-summary-list-example--card"> See macro options for card</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-missing-information-summary-list-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the row <code>div</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">key</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The reference content (key) for each row item in the summary list component. <a href="#options-summary-list-with-missing-information-summary-list-example--rows-key"> See macro options for rows key</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The value for each row item in the summary list component. <a href="#options-summary-list-with-missing-information-summary-list-example--rows-value"> See macro options for rows value</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content for each row item in the summary list component. <a href="#options-summary-list-with-missing-information-summary-list-example--rows-actions"> See macro options for rows actions</a>. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-missing-information-summary-list-example--rows-key"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>key</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the key wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-missing-information-summary-list-example--rows-value"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>value</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the value wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-missing-information-summary-list-example--rows-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items within the row item of the summary list component. <a href="#options-summary-list-with-missing-information-summary-list-example--rows-actions-items"> See macro options for rows actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-missing-information-summary-list-example--rows-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-missing-information-summary-list-example--card"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>card</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Data for the summary card header. <a href="#options-summary-list-with-missing-information-summary-list-example--card-title"> See macro options for card title</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content shown in the header of each summary card wrapped around the summary list component. <a href="#options-summary-list-with-missing-information-summary-list-example--card-actions"> See macro options for card actions</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-missing-information-summary-list-example--card-title"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>title</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">headingLevel</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Heading level, from <code>1</code> to <code>6</code>. Default is <code>2</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the title wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-missing-information-summary-list-example--card-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items shown in the header within the summary card wrapped around the summary list component. <a href="#options-summary-list-with-missing-information-summary-list-example--card-actions-items"> See macro options for card actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-list-with-missing-information-summary-list-example--card-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for card actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ 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: "Contact information" }, value: { html: '<a href="#" class="govuk-link">Enter contact information</a>' } }, { key: { text: "Contact details" }, value: { html: '<a href="#" class="govuk-link">Enter contact details</a>' } } ] }) }}</code></pre> </div> </div> </div> <h2 id="summary-cards">Summary cards</h2> If you’re showing multiple summary lists on a page, you can show each list within a summary card. This lets you visually separate each summary list and give each a title and some actions. Use summary cards when you need to show: <ul> <li>multiple summary lists that all describe the same type of thing, such as people</li> <li>actions that will apply to all the items in a list</li> </ul> Summary cards are often used in case working systems to help users quickly view a set of information and related actions. Do not use summary cards if you only need to show a small amount of related information. Use summary lists instead, and structure them with headings if needed. If you’re showing summary cards at the end of a longer journey, you might want to familiarise the user with them earlier on – such as when the user reviews individual sections. <h3 id="card-titles">Card titles</h3> Use the summary card’s header area to give each summary list a title. Each title must be unique and help identify what the summary list describes. For example, this could be the name of a specific person, organisation or professional qualification. Try to keep titles short and relevant. You can use one or two important values in the summary list – such as the first and last name of a person. <div class="app-example-wrapper" id="summary-in-a-card-with-a-title-summary-list-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/summary-list/card-with-title/' target='_blank'> Open this example in a new tab: summary in a card with a title – summary list </a> </div> <iframe title="Summary in a card with a title – Summary list example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/summary-list/card-with-title/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-in-a-card-with-a-title-summary-list-example-html" role="tab" aria-controls="summary-in-a-card-with-a-title-summary-list-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-in-a-card-with-a-title-summary-list-example-nunjucks" role="tab" aria-controls="summary-in-a-card-with-a-title-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#summary-in-a-card-with-a-title-summary-list-example-html" aria-controls="summary-in-a-card-with-a-title-summary-list-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="summary-in-a-card-with-a-title-summary-list-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><div class="govuk-summary-card"> <div class="govuk-summary-card__title-wrapper"> <h2 class="govuk-summary-card__title"> Lead tenant </h2> </div> <div class="govuk-summary-card__content"> <dl class="govuk-summary-list"> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Age </dt> <dd class="govuk-summary-list__value"> 38 </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> age (Lead tenant)</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Nationality </dt> <dd class="govuk-summary-list__value"> UK national resident in UK </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> nationality (Lead tenant)</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Working situation </dt> <dd class="govuk-summary-list__value"> Part time – less than 30 hours a week </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> working situation (Lead tenant)</span></a> </dd> </div> </dl> </div> </div> <div class="govuk-summary-card"> <div class="govuk-summary-card__title-wrapper"> <h2 class="govuk-summary-card__title"> Person 2 </h2> </div> <div class="govuk-summary-card__content"> <dl class="govuk-summary-list"> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Details known </dt> <dd class="govuk-summary-list__value"> Yes </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> whether details are known (Person 2)</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Relationship to lead tenant </dt> <dd class="govuk-summary-list__value"> Partner </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> relationship to lead tenant (Person 2)</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Age </dt> <dd class="govuk-summary-list__value"> 42 </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> age (Person 2)</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Working situation </dt> <dd class="govuk-summary-list__value"> Unable to work because of long-term sickness or disability </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> working situation (Person 2)</span></a> </dd> </div> </dl> </div> </div> <div class="govuk-summary-card"> <div class="govuk-summary-card__title-wrapper"> <h2 class="govuk-summary-card__title"> Person 3 </h2> </div> <div class="govuk-summary-card__content"> <dl class="govuk-summary-list"> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Details known </dt> <dd class="govuk-summary-list__value"> Yes </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> whether details are known (Person 3)</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Relationship to lead tenant </dt> <dd class="govuk-summary-list__value"> Child </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> relationship to lead tenant (Person 3)</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Age </dt> <dd class="govuk-summary-list__value"> 7 </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> age (Person 3)</span></a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Working situation </dt> <dd class="govuk-summary-list__value"> Child under 16 </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> working situation (Person 3)</span></a> </dd> </div> </dl> </div> </div></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#summary-in-a-card-with-a-title-summary-list-example-nunjucks" aria-controls="summary-in-a-card-with-a-title-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="summary-in-a-card-with-a-title-summary-list-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-summary-in-a-card-with-a-title-summary-list-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-summary-list-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the summary list component. <a href="#options-summary-in-a-card-with-a-title-summary-list-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">card</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to wrap a summary card around the summary list component. If any of these options are present, a summary card will wrap around the summary list. <a href="#options-summary-in-a-card-with-a-title-summary-list-example--card"> See macro options for card</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-summary-list-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the row <code>div</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">key</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The reference content (key) for each row item in the summary list component. <a href="#options-summary-in-a-card-with-a-title-summary-list-example--rows-key"> See macro options for rows key</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The value for each row item in the summary list component. <a href="#options-summary-in-a-card-with-a-title-summary-list-example--rows-value"> See macro options for rows value</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content for each row item in the summary list component. <a href="#options-summary-in-a-card-with-a-title-summary-list-example--rows-actions"> See macro options for rows actions</a>. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-summary-list-example--rows-key"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>key</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the key wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-summary-list-example--rows-value"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>value</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the value wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-summary-list-example--rows-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items within the row item of the summary list component. <a href="#options-summary-in-a-card-with-a-title-summary-list-example--rows-actions-items"> See macro options for rows actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-summary-list-example--rows-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-summary-list-example--card"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>card</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Data for the summary card header. <a href="#options-summary-in-a-card-with-a-title-summary-list-example--card-title"> See macro options for card title</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content shown in the header of each summary card wrapped around the summary list component. <a href="#options-summary-in-a-card-with-a-title-summary-list-example--card-actions"> See macro options for card actions</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-summary-list-example--card-title"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>title</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">headingLevel</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Heading level, from <code>1</code> to <code>6</code>. Default is <code>2</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the title wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-summary-list-example--card-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items shown in the header within the summary card wrapped around the summary list component. <a href="#options-summary-in-a-card-with-a-title-summary-list-example--card-actions-items"> See macro options for card actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-summary-list-example--card-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for card actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ card: { title: { text: "Lead tenant" } }, rows: [ { key: { text: "Age" }, value: { html: "38" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "age" } ] } }, { key: { text: "Nationality" }, value: { html: "UK national resident in UK" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "nationality" } ] } }, { key: { text: "Working situation" }, value: { html: "Part time – less than 30 hours a week" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "working situation" } ] } } ] }) }} {{ govukSummaryList({ card: { title: { text: "Person 2" } }, rows: [ { key: { text: "Details known" }, value: { html: "Yes" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "whether details are known" } ] } }, { key: { text: "Relationship to lead tenant" }, value: { html: "Partner" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "relationship to lead tenant" } ] } }, { key: { text: "Age" }, value: { html: "42" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "age" } ] } }, { key: { text: "Working situation" }, value: { html: "Unable to work because of long-term sickness or disability" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "working situation" } ] } } ] }) }} {{ govukSummaryList({ card: { title: { text: "Person 3" } }, rows: [ { key: { text: "Details known" }, value: { html: "Yes" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "whether details are known" } ] } }, { key: { text: "Relationship to lead tenant" }, value: { html: "Child" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "relationship to lead tenant" } ] } }, { key: { text: "Age" }, value: { html: "7" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "age" } ] } }, { key: { text: "Working situation" }, value: { html: "Child under 16" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "working situation" } ] } } ] }) }}</code></pre> </div> </div> </div> <h3 id="adding-card-actions">Adding card actions</h3> You can add card actions in the header, which will be shown after the summary card’s title. For example, if you have multiple rows with “change” actions that all take the user to the same place, you can show a single “change” card action instead. This helps avoid repeating the same row action on every row. Card actions are shown in bold text to make them visually distinct from row actions – and help alert the user that the card action will affect the entire summary card. Write link text for card actions to tell the user what the card action will do and that it will apply to the entire summary card. It should also be as short as possible, usually 2 words. Example card actions include: <ul> <li>Remove tenant</li> <li>Edit qualification</li> <li>Update issue</li> <li>Approve application</li> <li>Cancel order</li> </ul> Keep it short and do not add more than 2 to 3 actions in a header. If a card action cannot easily be undone or might have serious consequences, consider adding a warning or asking the user for confirmation. <div class="app-example-wrapper" id="summary-in-a-card-with-a-title-and-actions-summary-list-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/summary-list/card-with-actions/' target='_blank'> Open this example in a new tab: summary in a card with a title and actions – summary list </a> </div> <iframe title="Summary in a card with a title and actions – Summary list example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/summary-list/card-with-actions/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-in-a-card-with-a-title-and-actions-summary-list-example-html" role="tab" aria-controls="summary-in-a-card-with-a-title-and-actions-summary-list-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-in-a-card-with-a-title-and-actions-summary-list-example-nunjucks" role="tab" aria-controls="summary-in-a-card-with-a-title-and-actions-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#summary-in-a-card-with-a-title-and-actions-summary-list-example-html" aria-controls="summary-in-a-card-with-a-title-and-actions-summary-list-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="summary-in-a-card-with-a-title-and-actions-summary-list-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><div class="govuk-summary-card"> <div class="govuk-summary-card__title-wrapper"> <h2 class="govuk-summary-card__title"> University of Gloucestershire </h2> <ul class="govuk-summary-card__actions"> <li class="govuk-summary-card__action"> <a class="govuk-link" href="#">Delete choice<span class="govuk-visually-hidden"> of University of Gloucestershire (University of Gloucestershire)</span></a> </li> <li class="govuk-summary-card__action"> <a class="govuk-link" href="#">Withdraw<span class="govuk-visually-hidden"> from University of Gloucestershire (University of Gloucestershire)</span></a> </li> </ul> </div> <div class="govuk-summary-card__content"> <dl class="govuk-summary-list"> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Course </dt> <dd class="govuk-summary-list__value"> English (3DMD)<br>PGCE with QTS full time </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Location </dt> <dd class="govuk-summary-list__value"> School name<br>Road, City, SW1 1AA </dd> </div> </dl> </div> </div> <div class="govuk-summary-card"> <div class="govuk-summary-card__title-wrapper"> <h2 class="govuk-summary-card__title"> University of Bristol </h2> <ul class="govuk-summary-card__actions"> <li class="govuk-summary-card__action"> <a class="govuk-link" href="#">Delete choice<span class="govuk-visually-hidden"> of University of Bristol (University of Bristol)</span></a> </li> <li class="govuk-summary-card__action"> <a class="govuk-link" href="#">Withdraw<span class="govuk-visually-hidden"> from University of Bristol (University of Bristol)</span></a> </li> </ul> </div> <div class="govuk-summary-card__content"> <dl class="govuk-summary-list"> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Course </dt> <dd class="govuk-summary-list__value"> English (Q3X1)<br>PGCE with QTS full time </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Location </dt> <dd class="govuk-summary-list__value"> School name<br>Road, City, SW2 1AA </dd> </div> </dl> </div> </div></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#summary-in-a-card-with-a-title-and-actions-summary-list-example-nunjucks" aria-controls="summary-in-a-card-with-a-title-and-actions-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="summary-in-a-card-with-a-title-and-actions-summary-list-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-summary-in-a-card-with-a-title-and-actions-summary-list-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-and-actions-summary-list-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the summary list component. <a href="#options-summary-in-a-card-with-a-title-and-actions-summary-list-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">card</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Can be used to wrap a summary card around the summary list component. If any of these options are present, a summary card will wrap around the summary list. <a href="#options-summary-in-a-card-with-a-title-and-actions-summary-list-example--card"> See macro options for card</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-and-actions-summary-list-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the row <code>div</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">key</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The reference content (key) for each row item in the summary list component. <a href="#options-summary-in-a-card-with-a-title-and-actions-summary-list-example--rows-key"> See macro options for rows key</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">value</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Required. The value for each row item in the summary list component. <a href="#options-summary-in-a-card-with-a-title-and-actions-summary-list-example--rows-value"> See macro options for rows value</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content for each row item in the summary list component. <a href="#options-summary-in-a-card-with-a-title-and-actions-summary-list-example--rows-actions"> See macro options for rows actions</a>. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-and-actions-summary-list-example--rows-key"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>key</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each key. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the key wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-and-actions-summary-list-example--rows-value"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>value</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each value. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the value wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-and-actions-summary-list-example--rows-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items within the row item of the summary list component. <a href="#options-summary-in-a-card-with-a-title-and-actions-summary-list-example--rows-actions-items"> See macro options for rows actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-and-actions-summary-list-example--rows-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for rows actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-and-actions-summary-list-example--card"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>card</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">title</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> Data for the summary card header. <a href="#options-summary-in-a-card-with-a-title-and-actions-summary-list-example--card-title"> See macro options for card title</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">actions</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> The action link content shown in the header of each summary card wrapped around the summary list component. <a href="#options-summary-in-a-card-with-a-title-and-actions-summary-list-example--card-actions"> See macro options for card actions</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-and-actions-summary-list-example--card-title"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>title</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Text to use within each title. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">headingLevel</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Heading level, from <code>1</code> to <code>6</code>. Default is <code>2</code>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the title wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-and-actions-summary-list-example--card-actions"> <caption class="govuk-table__caption govuk-heading-m ">Options for card <code>actions</code> object</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">items</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> The action link items shown in the header within the summary card wrapped around the summary list component. <a href="#options-summary-in-a-card-with-a-title-and-actions-summary-list-example--card-actions-items"> See macro options for card actions items</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the actions wrapper. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-summary-in-a-card-with-a-title-and-actions-summary-list-example--card-actions-items"> <caption class="govuk-table__caption govuk-heading-m ">Options for card actions <code>items</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">href</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. The value of the link’s <code>href</code> attribute for an action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within each action item. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">visuallyHiddenText</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the action item. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the action item. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {{ govukSummaryList({ card: { title: { text: "University of Gloucestershire" }, actions: { items: [ { href: "#", text: "Delete choice", visuallyHiddenText: "of University of Gloucestershire" }, { href: "#", text: "Withdraw", visuallyHiddenText: "from University of Gloucestershire" } ] } }, rows: [ { key: { text: "Course" }, value: { html: "English (3DMD) PGCE with QTS full time" } }, { key: { text: "Location" }, value: { html: "School name Road, City, SW1 1AA" } } ] }) }} {{ govukSummaryList({ card: { title: { text: "University of Bristol" }, actions: { items: [ { href: "#", text: "Delete choice", visuallyHiddenText: "of University of Bristol" }, { href: "#", text: "Withdraw", visuallyHiddenText: "from University of Bristol" } ] } }, rows: [ { key: { text: "Course" }, value: { html: "English (Q3X1) PGCE with QTS full time" } }, { key: { text: "Location" }, value: { html: "School name Road, City, SW2 1AA" } } ] }) }}</code></pre> </div> </div> </div> <h2 id="research-on-this-component">Research on this component</h2> This component was developed and tested by the Government Digital Service as part of the <a href="/patterns/check-answers/">check answers pattern</a>. The Department for Education contributed the summary card. It’s being used in some of their services, such as: <ul> <li><a href="https://www.gov.uk/apply-for-teacher-training">Apply for teacher training</a>, used by the general public</li> <li><a href="https://www.register-trainee-teachers.service.gov.uk/">Register trainee teachers</a>, used by people that work for training providers</li> </ul> The summary card is also used in services run by other departments, such us: <ul> <li>manage supervisions (Ministry of Justice)</li> <li>submit social housing lettings and sales data (Department for Levelling Up, Housing & Communities)</li> </ul> <h3 id="next-steps">Next steps</h3> We still want to learn more about when this component works well. If you use this component in your service, we’d like to hear about how you use the summary list and summary card, as well as any research findings you might have. </div> <h2 class="govuk-heading-l govuk-!-padding-top-7" id="help-improve-this-page">Help improve this component</h2> To help make sure that this page is useful, relevant and up to date, you can: <ul class="govuk-list govuk-list--bullet"> <li> take part in the <a class="govuk-link app-contact-panel__link" href="https://github.com/alphagov/govuk-design-system-backlog/issues/182"> ‘Summary list’ discussion on GitHub </a> and share your research </li> <li> <a class="govuk-link app-contact-panel__link" href="https://github.com/alphagov/govuk-design-system/edit/main/src/components/summary-list/index.md">propose a change on GitHub</a> – read more about <a class="govuk-link app-contact-panel__link" href="/community/propose-a-content-change-using-github/"> how to propose changes in GitHub </a> </li> </ul> <div class="app-contact-panel"> <h2 class="app-contact-panel__heading">Need help?</h2> If you’ve got a question about the GOV.UK Design System, <a class="govuk-link" href="/get-in-touch/">contact the team</a>. </div> </main> </div> <div class="app-back-to-top app-back-to-top--hidden" data-module="app-back-to-top"> <a class="govuk-link govuk-link--no-visited-state app-back-to-top__link" href="#top"> <svg role="presentation" focusable="false" class="app-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17"> <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path> </svg>Back to top </a> </div> </div> <footer class="govuk-footer app-footer"> <div class="govuk-width-container app-width-container"> <div class="govuk-footer__meta"> <div class="govuk-footer__meta-item govuk-footer__meta-item--grow"> <h2 class="govuk-visually-hidden">Support links</h2> <ul class="govuk-footer__inline-list"> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/accessibility-statement/"> Accessibility statement </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/sitemap/"> Sitemap </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/cookies/"> Cookies </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/privacy-policy/"> Privacy </a> </li> </ul> <div class="govuk-footer__meta-custom"> Built by the <a href="/design-system-team/" class="govuk-footer__link">GOV.UK Design System team</a> </div> <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41" > <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" /> </svg> All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license" >Open Government Licence v3.0</a>, except where otherwise stated </div> <div class="govuk-footer__meta-item"> <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/" > © Crown copyright </a> </div> </div> </div> </footer> <script type="module" src="/javascripts/application-f59bf1e64302757cb67086172d7d4999.js"></script> </body> </html>

CINXE.COM

Summary list – GOV.UK Design System