Components Key details bar

The key details bar groups and highlights the most relevant information on a page so that agents can find it easily.

It has only been researched on agent-facing services.

When to use this component

Use the key details bar when there is a small set of information that users check before starting a task or refer to while doing it.

Examples of key details could include:

  • name
  • National Insurance number
  • date of birth
  • phone number
  • postcode
  • appointee status
  • claim status

When not to use this component

Too much text will make this component hard to use, especially on smaller screens. Before using this component always check it on a range of screen sizes, including mobile devices.

If you need to highlight more information than can be usefully shown in the key details bar on a mobile device, use a different solution.

How it works

Open this key details bar example in a new tab
Name:
Jane Doe
National Insurance Number:
QQ 12 34 56 X
Claim status:
completed
Date of birth:
4 June 1972
Mobile number:
07777 900 900
Language:
Welsh speaker
<section class="dwp-key-details-bar" aria-label="Key details">
<div class="dwp-key-details-bar__key-details">
<dl class="dwp-key-details-bar__top-block">
    <dt class="govuk-visually-hidden">Name:</dt>
    <dd class="dwp-key-details-bar__primary">Jane Doe</dd>
    <dt class="govuk-visually-hidden">National Insurance Number:</dt>
    <dd class="dwp-key-details-bar__secondary">QQ 12 34 56 X</dd>
    <dt class="govuk-visually-hidden">Claim status:</dt>
    <dd class="govuk-table__cell dwp-key-details-bar__status">
        <strong class="govuk-tag dwp-key-details-bar__status--dwp-default">
            completed
        </strong>
    </dd>
</dl>
<dl class="dwp-key-details-bar__bottom-block">
    <dt>Date of birth:</dt>
    <dd>4 June 1972</dd>
    <dt>Mobile number:</dt>
    <dd>07777 900 900</dd>
    <dt>Language:</dt>
    <dd>Welsh speaker</dd>
</dl>
</div>
</section> 
.dwp-key-details-bar {
background-color: #1d70b8;
color: #fff;
font-family: Arial, sans-serif;
}

.dwp-key-details-bar dt,
.dwp-key-details-bar dd {
border: none;
margin: 0;
padding: 0;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details {
margin: 0 auto;
max-width: 960px;
padding: 20px 30px;
position: relative;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details .dwp-key-details-bar__top-block::after,
.dwp-key-details-bar .dwp-key-details-bar__key-details .dwp-key-details-bar__bottom-block::after {
clear: both;
content: ' ';
display: block;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details .dwp-key-details-bar__bottom-block {
border-top: 1px solid rgba(255, 255, 255, .3);
content: ' ';
padding-top: 10px;
margin-top: 6px;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details dd,
.dwp-key-details-bar .dwp-key-details-bar__key-details dt {
float: left;
font-size: 19px;
margin-right: 5px;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details dd {
margin-right: 20px;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details .dwp-key-details-bar__name {
font-size: 36px;
font-weight: 700;
line-height: 1.11111;
margin-right: 10px;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details .dwp-key-details-bar__nino {
font-size: 24px;
line-height: 1;
margin-top: 12px;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details .dwp-key-details-bar__status {
font-size: 16px;
font-weight: 700;
line-height: 1.25;
padding: 5px 8px 0;
color: #005ea5;
background-color: #fff;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
float: right;
margin: 5px 0 0;
}

@media (max-width: 40.0525em) {
.dwp-key-details-bar .dwp-key-details-bar__key-details {
padding: 20px 15px;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details .dwp-key-details-bar__bottom-block {
border: 0;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details dd,
.dwp-key-details-bar .dwp-key-details-bar__key-details dt {
float: none;
font-size: 16px;
margin: 0;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details dd {
margin-bottom: 20px;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details dd:last-of-type {
margin-bottom: 20px;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details .dwp-key-details-bar__name {
font-size: 24px;
line-height: 1.04167;
float: left;
margin: 0 5px 0 0;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details .dwp-key-details-bar__nino {
font-size: 18px;
float: left;
margin: 5px 0 0 0;
}

.dwp-key-details-bar .dwp-key-details-bar__key-details .dwp-key-details-bar__status {
font-size: 14px;
float: left;
clear: both;
margin-top: 5px;
}
}
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
primaryIdentifier object Required.The primary identifier
secondaryIdentifier object The secondary identifier
status object The claim status
additionalData array Array of optional additional data
classes string Additional classes to add to the key details bar
attributes object HTML Attributes (data attributes) to add to the key details bar 
{% from "key-details-bar/macro.njk" import dwpKeyDetailsBar %}

{{ dwpKeyDetailsBar({
primaryIdentifier: {
text: 'Name:',
value: 'Jane Doe'
},
secondaryIdentifier: {
text: 'National Insurance Number:',
value: 'QQ 12 34 56 X'
},
status: {
text: 'Claim status:',
value: 'completed'
},
additionalData: [
{
value: "4 June 1972",
text: "Date of birth:"
},
{
value: "07777 900 900",
text: "Mobile number:"
},
{
value: "Welsh speaker",
text: "Language:"
}
]
}) }}

The key details bar has a top block for the first and second most important items, and an optional bottom block for other key details.

You should use:

  • in the top block: no more than two items plus an optional status tag
  • in the bottom block: no more than four items

In the top block, do not use the same style for multiple items.

Using status tags

The key details bar can include a status tag. The default styling for this tag is blue text on a white background, but you can use the standard tag colours from the GOV.UK Design System if you prefer.

This example shows a tag styled using govuk-tag--red:

Open this key details bar example in a new tab
Name:
Jane Doe
Nino:
QQ 12 34 56 X
Claim status:
urgent
Date of birth:
4 June 1972
Mobile number:
07777 900 900
Language:
Welsh speaker
<section class="dwp-key-details-bar" aria-label="Key details">
<div class="dwp-key-details-bar__key-details">
<dl class="dwp-key-details-bar__top-block">
    <dt class="govuk-visually-hidden">Name:</dt>
    <dd class="dwp-key-details-bar__primary">Jane Doe</dd>
    <dt class="govuk-visually-hidden">Nino:</dt>
    <dd class="dwp-key-details-bar__secondary">QQ 12 34 56 X</dd>
    <dt class="govuk-visually-hidden">Claim status:</dt>
    <dd class="govuk-table__cell dwp-key-details-bar__status">
        <strong class="govuk-tag govuk-tag--red">
            urgent
        </strong>
    </dd>
</dl>
<dl class="dwp-key-details-bar__bottom-block">
    <dt>Date of birth:</dt>
    <dd>4 June 1972</dd>
    <dt>Mobile number:</dt>
    <dd>07777 900 900</dd>
    <dt>Language:</dt>
    <dd>Welsh speaker</dd>
</dl>
</div>
</section>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
primaryIdentifier object Required.The primary identifier
secondaryIdentifier object The secondary identifier
status object The claim status
additionalData array Array of optional additional data
classes string Additional classes to add to the key details bar
attributes object HTML Attributes (data attributes) to add to the key details bar 
{% from "key-details-bar/macro.njk" import dwpKeyDetailsBar %}

{{ dwpKeyDetailsBar({
primaryIdentifier: {
text: 'Name:',
value: 'Jane Doe'
},
secondaryIdentifier: {
text: 'Nino:',
value: 'QQ 12 34 56 X'
},
status: {
text: 'Claim status:',
value: 'urgent',
classes: 'govuk-tag--red'
},
additionalData: [
{
value: "4 June 1972",
text: "Date of birth:"
},
{
value: "07777 900 900",
text: "Mobile number:"
},
{
value: "Welsh speaker",
text: "Language:"
}
]
}) }}

Technical guidance

The key details bar should be placed outside the <main> tag. This will allow a screen reader user to skip past it using the skip link.

You may need your <h1> to reference something from the key details bar so that it still makes sense when a screen reader user skips the bar. This may be required even if your <h1> is visually hidden.

Accessibility

If you use status tags, take care to check all possible colour combinations for contrast.

For more about building accessible services see the DWP Accessibility Manual.

Research

This component has only been researched on agent-facing services.

Contribute

If you have used or researched this component, please let us know what you found so we can make it better for everyone. There is an open discussion on GitHub where you can share anything you think might be useful.

Discuss the Key details bar on GitHub

Get in touch

If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk