Summary list
Utilize a summary list to present a concise overview of information, such as a user's responses displayed at the end of a form.
The summary list uses the <dt> HTML element to display key-value pairs in a clear format. The overall style is borrowed from the Table component.
- Key
<dt>: The first column displays the item or attribute being described. It acts as a label or identifier for the value in the next column. - Value
<dd>: The second column contains the corresponding data or details for each key. This is the main information that the summary list highlights. - Actions (optional)
<dd>: The third column, if present, provides interaction options, such as edit or delete, allowing users to take action on specific items in the list.
Usage examples
- Subsidy Application Review: Summarize details of a citizen's subsidy application, including personal information, submitted documents, and application status, before final submission.
- Tax Filing Summary: Provide a summary of a citizen’s tax filing, including income details, deductions, and tax amount owed or refunded, for review before filing.
- Permit Application Overview: Display key information related to a government permit application, such as applicant details, permit type, and application fee, before proceeding to payment or approval.