Summary list

Standard

Default

A default summary list shows information as a list of key facts.

• Name: Firstname Lastname
• Name: Change
• Date of birth: 13/08/1980
• Contact information:

  email@email.com

  Address line 1; Address line 2; Address line 3

Show code

<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">Firstname Lastname</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 govuk-summary-list__row--no-actions">
    <dt class="govuk-summary-list__key">Date of birth</dt>
    <dd class="govuk-summary-list__value">13/08/1980</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">
      <p class="govuk-body">email@email.com</p>
      <p class="govuk-body">
        Address line 1<br />
        Address line 2<br />
        Address line 3
      </p>
    </dd>
  </div>
</dl>

---
import { SummaryList, SummaryListRow, SummaryListKey, SummaryListValue, SummaryListActions } from "@i-dot-ai-npm/component-library-astro";
---

<SummaryList>
  <SummaryListRow>
    <SummaryListKey>Name</SummaryListKey>
    <SummaryListValue>Firstname Lastname</SummaryListValue>
    <SummaryListActions>
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden"> name</span>
      </a>
    </SummaryListActions>
  </SummaryListRow>
  <SummaryListRow noActions>
    <SummaryListKey>Date of birth</SummaryListKey>
    <SummaryListValue>13/08/1980</SummaryListValue>
  </SummaryListRow>
  <SummaryListRow noActions>
    <SummaryListKey>Contact information</SummaryListKey>
    <SummaryListValue>
      <p class="govuk-body">email@email.com</p>
      <p class="govuk-body">
        Address line 1<br />
        Address line 2<br />
        Address line 3
      </p>
    </SummaryListValue>
  </SummaryListRow>
</SummaryList>

import { SummaryList, SummaryListRow, SummaryListKey, SummaryListValue, SummaryListActions } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <SummaryList>
      <SummaryListRow>
        <SummaryListKey>Name</SummaryListKey>
        <SummaryListValue>Firstname Lastname</SummaryListValue>
        <SummaryListActions>
          <a className="govuk-link" href="#">
            Change<span className="govuk-visually-hidden"> name</span>
          </a>
        </SummaryListActions>
      </SummaryListRow>
      <SummaryListRow noActions>
        <SummaryListKey>Date of birth</SummaryListKey>
        <SummaryListValue>13/08/1980</SummaryListValue>
      </SummaryListRow>
      <SummaryListRow noActions>
        <SummaryListKey>Contact information</SummaryListKey>
        <SummaryListValue>
          <p className="govuk-body">email@email.com</p>
          <p className="govuk-body">
            Address line 1<br />
            Address line 2<br />
            Address line 3
          </p>
        </SummaryListValue>
      </SummaryListRow>
    </SummaryList>
  );
}

<script>
  import { SummaryList, SummaryListRow, SummaryListKey, SummaryListValue, SummaryListActions } from "@i-dot-ai-npm/component-library-svelte";
</script>

<SummaryList>
  <SummaryListRow>
    <SummaryListKey>Name</SummaryListKey>
    <SummaryListValue>Firstname Lastname</SummaryListValue>
    <SummaryListActions>
      <a class="govuk-link" href="#">
        Change<span class="govuk-visually-hidden"> name</span>
      </a>
    </SummaryListActions>
  </SummaryListRow>
  <SummaryListRow noActions>
    <SummaryListKey>Date of birth</SummaryListKey>
    <SummaryListValue>13/08/1980</SummaryListValue>
  </SummaryListRow>
  <SummaryListRow noActions>
    <SummaryListKey>Contact information</SummaryListKey>
    <SummaryListValue>
      <p class="govuk-body">email@email.com</p>
      <p class="govuk-body">
        Address line 1<br />
        Address line 2<br />
        Address line 3
      </p>
    </SummaryListValue>
  </SummaryListRow>
</SummaryList>

import { SummaryList, SummaryListRow, SummaryListKey, SummaryListValue, SummaryListActions } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <SummaryList>
      <SummaryListRow>
        <SummaryListKey>Name</SummaryListKey>
        <SummaryListValue>Firstname Lastname</SummaryListValue>
        <SummaryListActions>
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden"> name</span>
          </a>
        </SummaryListActions>
      </SummaryListRow>
      <SummaryListRow noActions>
        <SummaryListKey>Date of birth</SummaryListKey>
        <SummaryListValue>13/08/1980</SummaryListValue>
      </SummaryListRow>
      <SummaryListRow noActions>
        <SummaryListKey>Contact information</SummaryListKey>
        <SummaryListValue>
          <p class="govuk-body">email@email.com</p>
          <p class="govuk-body">
            Address line 1<br />
            Address line 2<br />
            Address line 3
          </p>
        </SummaryListValue>
      </SummaryListRow>
    </SummaryList>
  );
}

When to use this component

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 Check answers pattern.

Summary cards are a variant within this component. 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.

When not to use this component

The summary list uses the description list (<dl>) 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 Task list component. For those use a <table>, <ul> or <ol>.