Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Details

These examples are used for automated tests and may not follow service manual best practice.

Details default

Open this example in a new tab: Details default

How to find your NHS number

An NHS number is a 10 digit number, like 999 123 4567.

You can find your NHS number by logging in to the NHS App or on any document the NHS has sent you, such as your:

  • prescriptions
  • test results
  • hospital referral letters
  • appointment letters

Ask your GP surgery for help if you cannot find your NHS number.

Code

Markup

<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 <span class="nhsuk-u-nowrap">999 123 4567</span>.</p>
<p>You can find your NHS number by logging in to the NHS App 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 cannot find your NHS number.</p>
  </div>
</details>

Macro

{% from "details/macro.njk" import details -%}

{% call details({
  summaryText: "How to find your NHS number"
}) -%}

<p>An NHS number is a 10 digit number, like <span class="nhsuk-u-nowrap">999 123 4567</span>.</p>
<p>You can find your NHS number by logging in to the NHS App 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 cannot find your NHS number.</p>

{%- endcall %}

Details expander

Open this example in a new tab: Details expander

Opening times
Day of the week Opening hours
Monday 9am to 6pm
Tuesday 9am to 6pm
Wednesday 9am to 6pm
Thursday 9am to 6pm
Friday 9am to 6pm
Saturday 9am to 1pm
Sunday Closed
Code

Markup

<details class="nhsuk-details nhsuk-expander">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">
      Opening times
    </span>
  </summary>
  <div class="nhsuk-details__text">
    <table class="nhsuk-table">
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th scope="col" class="nhsuk-table__header">
        Day of the week
      </th>
      <th scope="col" class="nhsuk-table__header">
        Opening hours
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Monday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Tuesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Wednesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Thursday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Friday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Saturday
      </th>
      <td class="nhsuk-table__cell">
        9am to 1pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Sunday
      </th>
      <td class="nhsuk-table__cell">
        Closed
      </td>
    </tr>
  </tbody>
</table>
  </div>
</details>

Macro

{% from "details/macro.njk" import details -%}

{% call details({
  summaryText: "Opening times",
  classes: "nhsuk-expander"
}) -%}

<table class="nhsuk-table">
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th scope="col" class="nhsuk-table__header">
        Day of the week
      </th>
      <th scope="col" class="nhsuk-table__header">
        Opening hours
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Monday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Tuesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Wednesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Thursday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Friday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Saturday
      </th>
      <td class="nhsuk-table__cell">
        9am to 1pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Sunday
      </th>
      <td class="nhsuk-table__cell">
        Closed
      </td>
    </tr>
  </tbody>
</table>

{%- endcall %}

Details expander open

Open this example in a new tab: Details expander open

Opening times
Day of the week Opening hours
Monday 9am to 6pm
Tuesday 9am to 6pm
Wednesday 9am to 6pm
Thursday 9am to 6pm
Friday 9am to 6pm
Saturday 9am to 1pm
Sunday Closed
Code

Markup

<details class="nhsuk-details nhsuk-expander" open>
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">
      Opening times
    </span>
  </summary>
  <div class="nhsuk-details__text">
    <table class="nhsuk-table">
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th scope="col" class="nhsuk-table__header">
        Day of the week
      </th>
      <th scope="col" class="nhsuk-table__header">
        Opening hours
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Monday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Tuesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Wednesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Thursday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Friday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Saturday
      </th>
      <td class="nhsuk-table__cell">
        9am to 1pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Sunday
      </th>
      <td class="nhsuk-table__cell">
        Closed
      </td>
    </tr>
  </tbody>
</table>
  </div>
</details>

Macro

{% from "details/macro.njk" import details -%}

{% call details({
  summaryText: "Opening times",
  classes: "nhsuk-expander",
  open: true
}) -%}

<table class="nhsuk-table">
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th scope="col" class="nhsuk-table__header">
        Day of the week
      </th>
      <th scope="col" class="nhsuk-table__header">
        Opening hours
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Monday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Tuesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Wednesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Thursday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Friday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Saturday
      </th>
      <td class="nhsuk-table__cell">
        9am to 1pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Sunday
      </th>
      <td class="nhsuk-table__cell">
        Closed
      </td>
    </tr>
  </tbody>
</table>

{%- endcall %}

Details open

Open this example in a new tab: Details open

How to find your NHS number

An NHS number is a 10 digit number, like 999 123 4567.

You can find your NHS number by logging in to the NHS App or on any document the NHS has sent you, such as your:

  • prescriptions
  • test results
  • hospital referral letters
  • appointment letters

Ask your GP surgery for help if you cannot find your NHS number.

Code

Markup

<details class="nhsuk-details" open>
  <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 <span class="nhsuk-u-nowrap">999 123 4567</span>.</p>
<p>You can find your NHS number by logging in to the NHS App 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 cannot find your NHS number.</p>
  </div>
</details>

Macro

{% from "details/macro.njk" import details -%}

{% call details({
  summaryText: "How to find your NHS number",
  open: true
}) -%}

<p>An NHS number is a 10 digit number, like <span class="nhsuk-u-nowrap">999 123 4567</span>.</p>
<p>You can find your NHS number by logging in to the NHS App 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 cannot find your NHS number.</p>

{%- endcall %}