govuk-frontend
Version:
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
59 lines (58 loc) • 1.93 kB
HTML
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row govuk-summary-list__row--no-actions">
<dt class="govuk-summary-list__key">
Name
</dt>
<dd class="govuk-summary-list__value">
Sarah Philips
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Date of birth
</dt>
<dd class="govuk-summary-list__value">
5 January 1978
</dd>
<dd class="govuk-summary-list__actions">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> date of birth</span></a>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Address
</dt>
<dd class="govuk-summary-list__value">
72 Guild Street<br>
London<br>
SE23 6FH
</dd>
<dd class="govuk-summary-list__actions">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> address</span></a>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Contact details
</dt>
<dd class="govuk-summary-list__value">
07700 900457<br>
sarah.phillips@example.com
</dd>
<dd class="govuk-summary-list__actions">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> contact details</span></a>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Licence period
</dt>
<dd class="govuk-summary-list__value">
<p class="govuk-body">This is a longer paragraph of text provided by the user to provide additional information.</p>
<p class="govuk-body">This is a second paragraph of text provided by the user.</p>
</dd>
<dd class="govuk-summary-list__actions">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> licence period</span></a>
</dd>
</div>
</dl>