Styles

Definition lists

A selection of styles for definition lists.

Stacked

Open this definition-lists example in a new tab
HTML 
<dl class="das-definition-list">
    <dt class="das-definition-list__title">Name</dt>
    <dd class="das-definition-list__definition">Education and Skills Funding Agency</dd>
    <dt class="das-definition-list__title">Telephone</dt>
    <dd class="das-definition-list__definition">01234 567 890</dd>
    <dt class="das-definition-list__title">Email</dt>
    <dd class="das-definition-list__definition"><a href="mailto:#" class="govuk-link">email@address.co.uk</a></dd>
    <dt class="das-definition-list__title">Address</dt>
    <dd class="das-definition-list__definition">Cheylesmore House, 5 Quinton Rd, Coventry CV1 2WT</dd>
</dl>

Inline

Open this definition-lists example in a new tab
HTML 
<dl class="das-definition-list das-definition-list--inline">
    <dt class="das-definition-list__title">Name</dt>
    <dd class="das-definition-list__definition">Education and Skills Funding Agency</dd>
    <dt class="das-definition-list__title">Telephone</dt>
    <dd class="das-definition-list__definition">01234 567 890</dd>
    <dt class="das-definition-list__title">Email</dt>
    <dd class="das-definition-list__definition"><a href="mailto:#" class="govuk-link">email@address.co.uk</a></dd>
    <dt class="das-definition-list__title">Address</dt>
    <dd class="das-definition-list__definition">Cheylesmore House, 5 Quinton Rd, Coventry CV1 2WT</dd>
</dl>

Meta

An inline definition list used to show meta information. Smaller font size, the <dt> has a normal font weight and lighter in colour

Open this definition-lists example in a new tab
HTML 
<dl class="das-definition-list das-definition-list--meta">
    <dt class="das-definition-list__title">Name</dt>
    <dd class="das-definition-list__definition">Education and Skills Funding Agency</dd>
    <dt class="das-definition-list__title">Telephone</dt>
    <dd class="das-definition-list__definition">01234 567 890</dd>
    <dt class="das-definition-list__title">Email</dt>
    <dd class="das-definition-list__definition"><a href="mailto:#" class="govuk-link">email@address.co.uk</a></dd>
    <dt class="das-definition-list__title">Address</dt>
    <dd class="das-definition-list__definition">Cheylesmore House, 5 Quinton Rd, Coventry CV1 2WT</dd>
</dl>

Table

Open this definition-lists example in a new tab
HTML 
<dl class="das-definition-list das-definition-list--table">
    <dt class="das-definition-list__title">Name</dt>
    <dd class="das-definition-list__definition">Education and Skills Funding Agency</dd>
    <dt class="das-definition-list__title">Telephone</dt>
    <dd class="das-definition-list__definition">01234 567 890</dd>
    <dt class="das-definition-list__title">Email</dt>
    <dd class="das-definition-list__definition"><a href="mailto:#" class="govuk-link">email@address.co.uk</a></dd>
    <dt class="das-definition-list__title">Address</dt>
    <dd class="das-definition-list__definition">Cheylesmore House, 5 Quinton Rd, Coventry CV1 2WT</dd>
</dl>

Table with separators

Very similar in style to GDS summary list

Open this definition-lists example in a new tab
HTML 
<dl class="das-definition-list das-definition-list--table">
    <dt class="das-definition-list__title das-definition-list__title--spacer">Accepted by</dt>
    <dd class="das-definition-list__definition das-definition-list__definition--spacer">Steve Jones</dd>
    <dt class="das-definition-list__title das-definition-list__title--spacer">On behalf of</dt>
    <dd class="das-definition-list__definition das-definition-list__definition--spacer">Happy Incorporated</dd>
    <dt class="das-definition-list__title das-definition-list__title--spacer">Address</dt>
    <dd class="das-definition-list__definition das-definition-list__definition--spacer">Happy Incorporated, Lovely Lane, Nice, H4 PPY</dd>
    <dt class="das-definition-list__title das-definition-list__title--spacer">Accepted on</dt>
    <dd class="das-definition-list__definition das-definition-list__definition--spacer">20 November 2019</dd>
</dl>