Skip to main content

Details

Make a page easier to scan by letting users reveal more detailed information only if they need it.

Code and design

Open in new window
Copy
<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">
      Where can I find my NHS number?
    </span>
  </summary>
  <div class="nhsuk-details__text">
    <p>An NHS number is a 10 digit number, like 485 777 3456.</p>
    <p>You can find your NHS number on any document the NHS has sent to you. This could be:</p>
    <ul>
      <li>prescriptions</li>
      <li>test results</li>
      <li>hospital referral letters</li>
      <li>appointment letters</li>
      <li>your NHS medical card</li>
    </ul>
    <p>Ask your GP practice for help if you can't find your NHS number.</p>

  </div>
</details>
Copy
{% from 'details/macro.njk' import details %}

{{ details({
  "text": "Where can I find my NHS number?",
  "HTML": "
  <p>An NHS number is a 10 digit number, like 485 777 3456.</p>
  <p>You can find your NHS number on any document the NHS has sent to you. This could be:</p>
  <ul>
    <li>prescriptions</li>
    <li>test results</li>
    <li>hospital referral letters</li>
    <li>appointment letters</li>
    <li>your NHS medical card</li>
  </ul>
  <p>Ask your GP practice for help if you can't find your NHS number.</p>
  "
}) }}

When to use details

Use the details component to make a page easier to scan when it contains information that only some users will need, as the GOV.UK design system recommends.

When not to use details

Do not use details to hide information that most users will need.

How to use details

The details component is a short link that expands into more detailed help text when a user clicks on it.

Make the link text short and descriptive so users can quickly work out if they need to click on it.

Research

We tested the details component on health information pages and a "Register with a GP" transactional prototype at 5 labs in 2018.

Users understood the purpose of the component and were able to use it.

Anecdotally we've heard users being reluctant to expand the details component in user testing sessions for transactional services (forms). When asked why they wouldn't click, they explained that they thought the link text (blue underlined text) would take them to a new page and they would lose their progress.

If you’ve used details, get in touch to share your user research findings.

Discuss

Discuss details components on GitHub

Get in touch

If you have a question:

Updated: February 2019

Similar components