Skip to main content
Component Pad – Experimental – output can be wrong
GOV.UK Frontend

Summary list

Component guide

Example

Name
Sarah Philips
Change name
Date of birth
5 January 1978
Change date of birth
Address
72 Guild Street
London
SE23 6FH
Change address
Contact details

07700 900457

sarah.phillips@example.com

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>
Nunjucks 

{{ 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<br>London<br>SE23 6FH"
      },
      "actions": {
        "items": [
          {
            "href": "#",
            "text": "Change",
            "visuallyHiddenText": "address"
          }
        ]
      }
    },
    {
      "key": {
        "text": "Contact details"
      },
      "value": {
        "html": "<p class=\"govuk-body\">07700 900457</p><p class=\"govuk-body\">sarah.phillips@example.com</p>"
      },
      "actions": {
        "items": [
          {
            "href": "#",
            "text": "Add",
            "visuallyHiddenText": "contact details"
          },
          {
            "href": "#",
            "text": "Change",
            "visuallyHiddenText": "contact details"
          }
        ]
      }
    }
  ]
}) }}