Skip to main content

Internal review app NHS.UK frontend

Use design system guidance and examples to build consistent, accessible NHS services for the public and staff.

Deployed automatically from main branch (opens in new tab).

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
You can find your NHS number by logging in to the NHS App or on any document the NHS has sent you.
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">
    You can find your NHS number by logging in to the NHS App or on any document the NHS has sent you.
  </div>
</details>

Macro

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

{{ details({
  summary: {
    text: "How to find your NHS number"
  },
  text: "You can find your NHS number by logging in to the NHS App or on any document the NHS has sent you."
}) }}

Details closed explicitly

Open this example in a new tab: Details closed explicitly

How to find your NHS number
You can find your NHS number by logging in to the NHS App or on any document the NHS has sent you.
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">
    You can find your NHS number by logging in to the NHS App or on any document the NHS has sent you.
  </div>
</details>

Macro

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

{{ details({
  summary: {
    text: "How to find your NHS number"
  },
  text: "You can find your NHS number by logging in to the NHS App or on any document the NHS has sent you.",
  open: false
}) }}

Details expander

Open this example in a new tab: Details expander

Opening times
We are open 9am to 6pm, Monday to Saturday.
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">
    We are open 9am to 6pm, Monday to Saturday.
  </div>
</details>

Macro

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

{{ details({
  summary: {
    text: "Opening times"
  },
  text: "We are open 9am to 6pm, Monday to Saturday.",
  classes: "nhsuk-expander"
}) }}

Details expander closed explicitly

Open this example in a new tab: Details expander closed explicitly

Opening times
We are open 9am to 6pm, Monday to Saturday.
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">
    We are open 9am to 6pm, Monday to Saturday.
  </div>
</details>

Macro

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

{{ details({
  summary: {
    text: "Opening times"
  },
  text: "We are open 9am to 6pm, Monday to Saturday.",
  classes: "nhsuk-expander",
  open: false
}) }}

Details expander open

Open this example in a new tab: Details expander open

Opening times
We are open 9am to 6pm, Monday to Saturday.
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">
    We are open 9am to 6pm, Monday to Saturday.
  </div>
</details>

Macro

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

{{ details({
  summary: {
    text: "Opening times"
  },
  text: "We are open 9am to 6pm, Monday to Saturday.",
  classes: "nhsuk-expander",
  open: true
}) }}

Details expander with HTML

Open this example in a new tab: Details expander with HTML

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

Macro

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

{{ details({
  summary: {
    text: "Opening times"
  },
  html: '\n<table class="nhsuk-table nhsuk-table--no-last-row-border">\n  <thead class="nhsuk-table__head">\n    <tr class="nhsuk-table__row">\n      <th class="nhsuk-table__header" scope="col">\n        Day of the week\n      </th>\n      <th class="nhsuk-table__header" scope="col">\n        Opening hours\n      </th>\n    </tr>\n  </thead>\n  <tbody class="nhsuk-table__body">\n    <tr class="nhsuk-table__row">\n      <th class="nhsuk-table__header" scope="row">\n        Monday\n      </th>\n      <td class="nhsuk-table__cell">\n        9am to 6pm\n      </td>\n    </tr>\n    <tr class="nhsuk-table__row">\n      <th class="nhsuk-table__header" scope="row">\n        Tuesday\n      </th>\n      <td class="nhsuk-table__cell">\n        9am to 6pm\n      </td>\n    </tr>\n    <tr class="nhsuk-table__row">\n      <th class="nhsuk-table__header" scope="row">\n        Wednesday\n      </th>\n      <td class="nhsuk-table__cell">\n        9am to 6pm\n      </td>\n    </tr>\n    <tr class="nhsuk-table__row">\n      <th class="nhsuk-table__header" scope="row">\n        Thursday\n      </th>\n      <td class="nhsuk-table__cell">\n        9am to 6pm\n      </td>\n    </tr>\n    <tr class="nhsuk-table__row">\n      <th class="nhsuk-table__header" scope="row">\n        Friday\n      </th>\n      <td class="nhsuk-table__cell">\n        9am to 6pm\n      </td>\n    </tr>\n    <tr class="nhsuk-table__row">\n      <th class="nhsuk-table__header" scope="row">\n        Saturday\n      </th>\n      <td class="nhsuk-table__cell">\n        9am to 1pm\n      </td>\n    </tr>\n    <tr class="nhsuk-table__row">\n      <th class="nhsuk-table__header" scope="row">\n        Sunday\n      </th>\n      <td class="nhsuk-table__cell">\n        Closed\n      </td>\n    </tr>\n  </tbody>\n</table>\n',
  classes: "nhsuk-expander"
}) }}

Details expander with HTML via call block

Open this example in a new tab: Details expander with HTML via call block

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

Macro

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

{% call details({
  summary: {
    text: "Opening times"
  },
  classes: "nhsuk-expander"
}) %}
<table class="nhsuk-table nhsuk-table--no-last-row-border">
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Day of the week
      </th>
      <th class="nhsuk-table__header" scope="col">
        Opening hours
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Monday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Tuesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Wednesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Thursday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Friday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Saturday
      </th>
      <td class="nhsuk-table__cell">
        9am to 1pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        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
You can find your NHS number by logging in to the NHS App or on any document the NHS has sent you.
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">
    You can find your NHS number by logging in to the NHS App or on any document the NHS has sent you.
  </div>
</details>

Macro

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

{{ details({
  summary: {
    text: "How to find your NHS number"
  },
  text: "You can find your NHS number by logging in to the NHS App or on any document the NHS has sent you.",
  open: true
}) }}

Details with HTML

Open this example in a new tab: Details with HTML

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 -%}

{{ details({
  summary: {
    text: "How to find your NHS number"
  },
  html: '<p>An NHS number is a 10 digit number, like <span class="nhsuk-u-nowrap">999 123 4567</span>.</p>\n<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>\n<ul>\n  <li>prescriptions</li>\n  <li>test results</li>\n  <li>hospital referral letters</li>\n  <li>appointment letters</li>\n</ul>\n<p>Ask your GP surgery for help if you cannot find your NHS number.</p>'
}) }}

Details with HTML via call block

Open this example in a new tab: Details with HTML via call block

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({
  summary: {
    text: "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 with summary as string

Open this example in a new tab: Details with summary as string

How to find your NHS number
An NHS number is a 10 digit number, like 999 123 4567
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">
    An NHS number is a 10 digit number, like 999 123 4567
  </div>
</details>

Macro

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

{{ details({
  summary: "How to find your NHS number",
  text: "An NHS number is a 10 digit number, like 999 123 4567"
}) }}

Details with summary HTML

Open this example in a new tab: Details with summary HTML

How to find your NHS number
An NHS number is a 10 digit number, like 999 123 4567
Code

Markup

<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">
      How to find your <span>NHS number</span>
    </span>
  </summary>
  <div class="nhsuk-details__text">
    An NHS number is a 10 digit number, like 999 123 4567
  </div>
</details>

Macro

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

{{ details({
  summary: {
    html: "How to find your <span>NHS number</span>"
  },
  text: "An NHS number is a 10 digit number, like 999 123 4567"
}) }}