Summary List

Use a summary list to display key-value pairs of information, commonly used on "check your answers" pages.

Default Summary List

<dl class="summary-list">
  <div class="summary-list-row">
    <dt class="summary-list-key">Name</dt>
    <dd class="summary-list-value">John Smith</dd>
  </div>
  <div class="summary-list-row">
    <dt class="summary-list-key">Date of birth</dt>
    <dd class="summary-list-value">5 January 1978</dd>
  </div>
  ...
</dl>

With Change Links

Add change links on "check your answers" pages to let users edit their information.

<div class="summary-list-row">
  <dt class="summary-list-key">Name</dt>
  <dd class="summary-list-value">John Smith</dd>
  <dd class="summary-list-actions">
    <a href="#">Change<span class="visually-hidden"> name</span></a>
  </dd>
</div>

With Multiple Values

<dd class="summary-list-value">
  <ul>
    <li>45 Park Lane, London, W1K 1PN</li>
    <li>12 High Street, Manchester, M1 1AA</li>
  </ul>
</dd>

When to Use

Use a summary list for:

• "Check your answers" pages in forms
• Displaying account details
• Showing application status and details
• Any key-value pair information

Don't use a summary list for:

• Tabular data with multiple columns (use tables)
• Navigation lists
• Simple content lists (use standard lists)

Accessibility

• Uses semantic <dl>, <dt>, <dd> elements
• "Change" links include visually hidden text for context
• Screen readers will read keys and values together
• Responsive design stacks on mobile

CSS Classes

/* Container */
.summary-list { }

/* Row */
.summary-list-row { }

/* Key (label) */
.summary-list-key { }

/* Value */
.summary-list-value { }

/* Actions (change links) */
.summary-list-actions { }