Skip to main content

Content presentation - Details

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

Open this details example in new window
Copy
<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">
      How to find your 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 by logging in to a GP online service or on any document the NHS has sent you, such as your:</p>
    <ul>
      <li>prescriptions</li>
      <li>test results</li>
      <li>hospital referral letters</li>
      <li>appointment letters</li>
    </ul>
    <p>Ask your GP surgery for help if you can't find your NHS number.</p>

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

{{ details({
  "text": "How to find your NHS number",
  "HTML": "
  <p>An NHS number is a 10 digit number, like 485 777 3456.</p>
    <p>You can find your NHS number by logging in to a GP online service or on any document the NHS has sent you, such as your:</p>
    <ul>
        <li>prescriptions</li>
        <li>test results</li>
        <li>hospital referral letters</li>
        <li>appointment letters</li>
    </ul>
    <p>Ask your GP surgery for help if you can't find your NHS number.</p>
  "
}) }}

When to use details

There are 2 ways to let users reveal more information:

Use the details component to make a page easier to scan when it contains information that only some users will need. For example, use it to give users help in context.

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 to show more 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.

Details and expanders

Details and expanders both hide sections of content which a user can choose to reveal.

The details component is less visually prominent than an expander, so tends to work better for content which is not as important to users.

Users may be reluctant to click on the details component in forms. Read more in the research section below.

Research

User research has shown us that users understand the purpose of the component and are 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.

Help improve this page

The manual is a community effort. Anyone can help improve and grow it.

To help make sure the Details guidance is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the NHS digital service manual or want to feedback, you can contact the team:

Help improve the service manual

We’d welcome your feedback. Can you answer some questions about your visit today?

Updated: November 2019