Change date of birth
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>
<SummaryList>
to display structured summary information.labels
and values
for clarity and accessibility.Figma Library | Considering |
Local HTML | Stable |
Global HTML | Beta |
Global React | Beta |