In Review

Summary List

Variants

Default

Name
John Smith
Change name
Date of Birth
8 November 1982

Change date of birth

Address

72 Guild Street


London


SE23 6FH

Change address

<div class="gi-summary-list" role="list" aria-label="Summary list">
  <dl>
    <dt>Name</dt>
    <dd class="gi-summary-list-value">John Smith</dd>
    <dd class="gi-summary-list-actions">
      <a href="/change-name" aria-label="Link action: Change name">Change name</a>
    </dd>
  </dl>
  <dl>
    <dt>Date of Birth</dt>
    <dd class="gi-summary-list-value">8 November 1982</dd>
    <dd class="gi-summary-list-actions">
      <a href="/change-dob" aria-label="Link action: Change date of birth">Change date of birth</a>
    </dd>
  </dl>
  <dl>
    <dt>Address</dt>
    <dd class="gi-summary-list-value">
      72 Guild Street
      <br/>
      London
      <br/>
      SE23 6FH
      <br/>
    </dd>
    <dd class="gi-summary-list-actions">
      <a href="/change-address" aria-label="Link action: Change address">Change address</a>
    </dd>
  </dl>
</div>
    {{ govieSummaryList({ "rows":
      [ { "label": "Name", "value": "John Smith", "action": { "href": "/change-name", "label": "Change name" } },
        { "label": "Date of Birth", "value": "8 November 1982", "action": { "href": "/change-dob", "label": "Change date of birth" } },
        { "label": "Address", "value": "72 Guild Street <br/> London <br/> SE23 6FH", "action": { "href": "/change-address", "label": "Change address" } } 
      ]})
    }} 
    import { SummaryList, SummaryListRow, SummaryListValue, SummaryListAction } from '@govie-ds/react';
    
    <SummaryList>
      <SummaryListRow label="Name">
        <SummaryListValue>John Smith</SummaryListValue>
        <SummaryListAction href="/change-name">Change name</SummaryListAction>
      </SummaryListRow>
      <SummaryListRow label="Date of Birth">
          <SummaryListValue>8 November 1982</SummaryListValue>
          <SummaryListAction href="/change-dob">Change date of birth</SummaryListAction>
      </SummaryListRow>
      <SummaryListRow label="Address">
        <SummaryListValue>
          72 Guild Street 
          <br/>
          London
          <br/>
          SE23 6FH
        </SummaryListValue>
        <SummaryListAction href="/change-address">Change address</SummaryListAction>
      </SummaryListRow>
    </SummaryList>

Usage

Best Practices

When to use this component

When not to use this component

Status

Figma Library
Considering
Local HTML
Stable
Global HTML
Beta
Global React
Beta