Skip to main content
All components

ComponentDetails

12 of 12 upstream examples match. Razor component: <NhsukDetails>

Default

Matches upstream

Open on its own page (opens in new tab)

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.
Razor Pages and MVC 
<nhsuk-details
    summary="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."
/>
Blazor 
<NhsukDetails
    Summary="@(new DetailsSummaryOptions
    {
        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."
/>
Nunjucks (upstream) 
{% from "nhsuk/components/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."
}) }}

Closed explicitly

Matches upstream

Open on its own page (opens in new tab)

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.
Razor Pages and MVC 
<nhsuk-details
    summary="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"
/>
Blazor 
<NhsukDetails
    Summary="@(new DetailsSummaryOptions
    {
        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"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/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
}) }}

Expander

Matches upstream

Open on its own page (opens in new tab)

Opening times
We are open 9am to 6pm, Monday to Saturday.
Razor Pages and MVC 
<nhsuk-details
    summary="Opening times"
    text="We are open 9am to 6pm, Monday to Saturday."
    classes="nhsuk-expander"
/>
Blazor 
<NhsukDetails
    Summary="@(new DetailsSummaryOptions
    {
        Text = "Opening times",
    })"
    Text="We are open 9am to 6pm, Monday to Saturday."
    Classes="nhsuk-expander"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/details/macro.njk" import details %}

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

Expander closed explicitly

Matches upstream

Open on its own page (opens in new tab)

Opening times
We are open 9am to 6pm, Monday to Saturday.
Razor Pages and MVC 
<nhsuk-details
    summary="Opening times"
    text="We are open 9am to 6pm, Monday to Saturday."
    classes="nhsuk-expander"
    open="false"
/>
Blazor 
<NhsukDetails
    Summary="@(new DetailsSummaryOptions
    {
        Text = "Opening times",
    })"
    Text="We are open 9am to 6pm, Monday to Saturday."
    Classes="nhsuk-expander"
    Open="false"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/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
}) }}

Expander open

Matches upstream

Open on its own page (opens in new tab)

Opening times
We are open 9am to 6pm, Monday to Saturday.
Razor Pages and MVC 
<nhsuk-details
    summary="Opening times"
    text="We are open 9am to 6pm, Monday to Saturday."
    classes="nhsuk-expander"
    open="true"
/>
Blazor 
<NhsukDetails
    Summary="@(new DetailsSummaryOptions
    {
        Text = "Opening times",
    })"
    Text="We are open 9am to 6pm, Monday to Saturday."
    Classes="nhsuk-expander"
    Open="true"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/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
}) }}

Expander with HTML

Matches upstream

Open on its own page (opens in new tab)

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
Razor Pages and MVC 
<nhsuk-details
    summary="Opening times"
    html=@(@"
<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>
")
    classes="nhsuk-expander"
/>
Blazor 
<NhsukDetails
    Summary="@(new DetailsSummaryOptions
    {
        Text = "Opening times",
    })"
    Html=@(@"
<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>
")
    Classes="nhsuk-expander"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/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"
}) }}

Expander with HTML via call block

Matches upstream

Open on its own page (opens in new tab)

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
Razor Pages and MVC 
<nhsuk-details summary="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>
</nhsuk-details>
Blazor 
<NhsukDetails
    Summary="@(new DetailsSummaryOptions
    {
        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>
</NhsukDetails>
Nunjucks (upstream) 
{% from "nhsuk/components/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 %}

Open

Matches upstream

Open on its own page (opens in new tab)

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.
Razor Pages and MVC 
<nhsuk-details
    summary="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"
/>
Blazor 
<NhsukDetails
    Summary="@(new DetailsSummaryOptions
    {
        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"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/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
}) }}

With HTML

Matches upstream

Open on its own page (opens in new tab)

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.

Razor Pages and MVC 
<nhsuk-details
    summary="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>
<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>")
/>
Blazor 
<NhsukDetails
    Summary="@(new DetailsSummaryOptions
    {
        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>
<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>")
/>
Nunjucks (upstream) 
{% from "nhsuk/components/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>"
}) }}

With HTML via call block

Matches upstream

Open on its own page (opens in new tab)

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.

Razor Pages and MVC 
<nhsuk-details summary="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>
</nhsuk-details>
Blazor 
<NhsukDetails
    Summary="@(new DetailsSummaryOptions
    {
        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>
</NhsukDetails>
Nunjucks (upstream) 
{% from "nhsuk/components/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 %}

With summary as string

Matches upstream

Open on its own page (opens in new tab)

How to find your NHS number
An NHS number is a 10 digit number, like 999 123 4567
Razor Pages and MVC 
<nhsuk-details
    summary="How to find your NHS number"
    text="An NHS number is a 10 digit number, like 999 123 4567"
/>
Blazor 
<NhsukDetails
    Summary="@("How to find your NHS number")"
    Text="An NHS number is a 10 digit number, like 999 123 4567"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/details/macro.njk" import details %}

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

With summary HTML

Matches upstream

Open on its own page (opens in new tab)

How to find your NHS number
An NHS number is a 10 digit number, like 999 123 4567
Razor Pages and MVC 
<nhsuk-details
    summary-options="@(new DetailsSummaryOptions
    {
        Html = "How to find your <span>NHS number</span>",
    })"
    text="An NHS number is a 10 digit number, like 999 123 4567"
/>
Blazor 
<NhsukDetails
    Summary="@(new DetailsSummaryOptions
    {
        Html = "How to find your <span>NHS number</span>",
    })"
    Text="An NHS number is a 10 digit number, like 999 123 4567"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/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\u00A0123\u00A04567"
}) }}