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) • 2.02 kB
HTML
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-width-one-half">
Name
</dt>
<dd class="govuk-summary-list__value govuk-!-width-one-quarter">
Firstname Lastname
</dd>
<dd class="govuk-summary-list__actions govuk-!-width-one-half">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item">
<a class="govuk-link" href="#">Edit<span class="govuk-visually-hidden"> name</span></a>
</li>
<li class="govuk-summary-list__actions-list-item">
<a class="govuk-link" href="#">Delete<span class="govuk-visually-hidden"> name</span></a>
</li>
</ul>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Date of birth
</dt>
<dd class="govuk-summary-list__value">
13/08/1980
</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">
Contact information
</dt>
<dd class="govuk-summary-list__value">
<p class="govuk-body">
email@email.com
</p>
<p class="govuk-body">
Address line 1<br>
Address line 2<br>
Address line 3<br>
Address line 4<br>
Address line 5
</p>
</dd>
<dd class="govuk-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item">
<a class="govuk-link" href="#">Edit<span class="govuk-visually-hidden"> contact information</span></a>
</li>
<li class="govuk-summary-list__actions-list-item">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> contact information</span></a>
</li>
</ul>
</dd>
</div>
</dl>