components.html

---
layout: page
title: Components
---

<h1>Components</h1>

<nav class="nhsuk-contents-list" role="navigation" aria-label="Pages in this guide">

  <h2 class="nhsuk-u-visually-hidden">Contents

  </h2>

  <ol class="nhsuk-contents-list__list">

    <li class="nhsuk-contents-list__item" aria-current="page">

      <span class="nhsuk-contents-list__current">What is AMD?

      </span>

    </li>

    <li class="nhsuk-contents-list__item">

      <a class="nhsuk-contents-list__link" href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/symptoms/">Symptoms

      </a>

    </li>

    <li class="nhsuk-contents-list__item">

      <a class="nhsuk-contents-list__link" href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/getting-diagnosed/">Getting diagnosed

      </a>

    </li>

    <li class="nhsuk-contents-list__item">

      <a class="nhsuk-contents-list__link" href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/treatment/">Treatments

      </a>

    </li>

    <li class="nhsuk-contents-list__item">

      <a class="nhsuk-contents-list__link" href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/living-with-amd/">Living with AMD

      </a>

    </li>

  </ol>

</nav>

</div>

</div>

<div class="nhsuk-grid-row">

  <div class="nhsuk-grid-column-full">

    <ul class="nhsuk-grid-row nhsuk-card-group">

      <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">

        <div class="nhsuk-card nhsuk-card--clickable">

          <div class="nhsuk-card__content">

            <h2 class="nhsuk-card__heading nhsuk-heading-m">

              <a class="nhsuk-card__link" href="#">Introduction to care and support

              </a>

            </h2>

            <p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers.

            </p>

          </div>

        </div>

      </li>

      <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">

        <div class="nhsuk-card nhsuk-card--clickable">

          <div class="nhsuk-card__content">

            <h2 class="nhsuk-card__heading nhsuk-heading-m">

              <a class="nhsuk-card__link" href="#">Help from social services and charitiest

              </a>

            </h2>

            <p class="nhsuk-card__description">Includes helplines, needs assessments, advocacy and reporting abuse.

            </p>

          </div>

        </div>

      </li>

      <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">

        <div class="nhsuk-card nhsuk-card--clickable">

          <div class="nhsuk-card__content">

            <h2 class="nhsuk-card__heading nhsuk-heading-m">

              <a class="nhsuk-card__link" href="#">Money, work and benefits

              </a>

            </h2>

            <p class="nhsuk-card__description">How to pay for care and support, and where you can get help with costs.

            </p>

          </div>

        </div>

      </li>

      <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">

        <div class="nhsuk-card nhsuk-card--clickable">

          <div class="nhsuk-card__content">

            <h2 class="nhsuk-card__heading nhsuk-heading-m">

              <a class="nhsuk-card__link" href="#">Care after a hospital stay

              </a>

            </h2>

            <p class="nhsuk-card__description">Includes hospital discharge and care and support afterwards.

            </p>

          </div>

        </div>

      </li>

    </ul>

    <ul class="nhsuk-grid-row nhsuk-card-group">

      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">

        <div class="nhsuk-card nhsuk-card--clickable">

          <div class="nhsuk-card__content">

            <h2 class="nhsuk-card__heading nhsuk-heading-m">

              <a class="nhsuk-card__link" href="#">5 steps to mental wellbeing

              </a>

            </h2>

            <p class="nhsuk-card__description">Practical advice to help you feel mentally and emotionally better.

            </p>

          </div>

        </div>

      </li>

      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">

        <div class="nhsuk-card nhsuk-card--clickable">

          <div class="nhsuk-card__content">

            <h2 class="nhsuk-card__heading nhsuk-heading-m">

              <a class="nhsuk-card__link" href="#">Healthy weight

              </a>

            </h2>

            <p class="nhsuk-card__description">Check your BMI using our healthy weight calculator and find out if you're a healthy weight.

            </p>

          </div>

        </div>

      </li>

      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">

        <div class="nhsuk-card nhsuk-card--clickable">

          <div class="nhsuk-card__content">

            <h2 class="nhsuk-card__heading nhsuk-heading-m">

              <a class="nhsuk-card__link" href="#">Exercise

              </a>

            </h2>

            <p class="nhsuk-card__description">Programmes, workouts and tips to get you moving and improve your fitness and wellbeing.

            </p>

          </div>

        </div>

      </li>

    </ul>

    <ul class="nhsuk-grid-row nhsuk-card-group">

      <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">

        <div class="nhsuk-card nhsuk-card--clickable">

          <div class="nhsuk-card__content">

            <p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">91 

              <span class="nhsuk-u-visually-hidden">Applicants

              </span>

            </p>

            <a href="#" class="nhsuk-card__link nhsuk-u-font-weight-normal nhsuk-u-font-size-19 nhsuk-link--no-visited-state">Applicants

            </a>

          </div>

        </div>

      </li>

      <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">

        <div class="nhsuk-card nhsuk-card--clickable">

          <div class="nhsuk-card__content">

            <p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">23 

              <span class="nhsuk-u-visually-hidden">Jobs

              </span>

            </p>

            <a href="#" class="nhsuk-card__link nhsuk-u-font-weight-normal nhsuk-u-font-size-19 nhsuk-link--no-visited-state">Jobs

            </a>

          </div>

        </div>

      </li>

      <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">

        <div class="nhsuk-card nhsuk-card--clickable">

          <div class="nhsuk-card__content">

            <p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">8 

              <span class="nhsuk-u-visually-hidden">Services

              </span>

            </p>

            <a href="#" class="nhsuk-card__link nhsuk-u-font-weight-normal nhsuk-u-font-size-19 nhsuk-link--no-visited-state">Services

            </a>

          </div>

        </div>

      </li>

      <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">

        <div class="nhsuk-card nhsuk-card--clickable">

          <div class="nhsuk-card__content">

            <p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">33 

              <span class="nhsuk-u-visually-hidden">Messages

              </span>

            </p>

            <a href="#" class="nhsuk-card__link nhsuk-u-font-weight-normal nhsuk-u-font-size-19 nhsuk-link--no-visited-state">Messages

            </a>

          </div>

        </div>

      </li>

    </ul>

  </div>

</div>

<div class="nhsuk-grid-row">

  <div class="nhsuk-grid-column-two-thirds">

    <div class="nhsuk-card">

      <div class="nhsuk-card__content">

        <h3 class="nhsuk-card__heading">

          If you need help now, but it’s not an emergency

        </h3>

        <p class="nhsuk-card__description">Go to 

          <a href="#">111.nhs.uk

          </a> or 

          <a href="#">call 111

          </a>.

        </p>

      </div>

    </div>

    <div class="nhsuk-card nhsuk-card--clickable">

      <div class="nhsuk-card__content">

        <h2 class="nhsuk-card__heading nhsuk-heading-m">

          <a class="nhsuk-card__link" href="#">Introduction to care and support

          </a>

        </h2>

        <p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers.

        </p>

      </div>

    </div>

    <div class="nhsuk-card nhsuk-card--clickable">

      <img class="nhsuk-card__img" src="https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg" alt="">

      <div class="nhsuk-card__content">

        <h2 class="nhsuk-card__heading nhsuk-heading-m">

          <a class="nhsuk-card__link" href="#">Exercise

          </a>

        </h2>

        <p class="nhsuk-card__description">Programmes, workouts and tips to get you moving and improve your fitness and wellbeing.

        </p>

      </div>

    </div>

    <div class="nhsuk-card nhsuk-card--feature">

      <div class="nhsuk-card__content nhsuk-card__content--feature">

        <h2 class="nhsuk-card__heading nhsuk-card__heading--feature nhsuk-heading-m">

          Feature card heading

        </h2>

        <p class="nhsuk-card__description">Feature card description

        </p>

      </div>

    </div>

    <p>The single-direction margin declarations have been changed to the bottom. All text elements use margin-bottom (24px desktop, 16px mobile).

    </p>

    <h2>Heading level two

    </h2>

    <p>Body paragraph. Ooh, that's a snazzy bouquet. Oh, this smells of, I don't know, basil. Sometimes you just want to say, sod all this wine, just give me a pint of, mineral water.

    </p>

    <h3>Heading level three

    </h3>

    <p>Body paragraph. All this wine nonsense! You get all these wine people, don't you? Wine this, wine that. Let's have a bit of red, let's have a bit of white.

    </p>

    <h4>Heading level four

    </h4>

    <p>Body paragraph. And, can I have the same, please? But with different shaped pasta. What do you call those pasta in bows? Like a bow-tie, but miniature? Like an action man bow-tie..

    </p>

    <p>A second paragraph of text with a 

      <a href="#">text link

      </a> inside, to show you what one looks like.

    </p>

    <h2>Heading level two

    </h2>

    <p>Body paragraph. The proof is in the pudding, and the pudding, in this case, is a football... Boof! Eat my goal!! The goalie has got football pie all over his shirt!

    </p>

    <div class="nhsuk-inset-text">

      <span class="nhsuk-u-visually-hidden">Information: 

      </span>

      <p>If you drive you must tell the 

        <a href="https://www.gov.uk/contact-the-dvla" title="External website">DVLA

        </a> about your vertigo. Visit the GOV.UK website for more information on 

        <a href="https://www.gov.uk/dizziness-and-driving" title="External website">driving with vertigo

        </a>

      </p>

    </div>

    <div class="nhsuk-warning-callout">

      <h3 class="nhsuk-warning-callout__label">

        Important

        <span class="nhsuk-u-visually-hidden">:

        </span>

      </h3>

      <p>If you develop symptoms of anaphylaxis, such as difficulty breathing, you should inject yourself in the outer thigh before seeking emergency medical help.

      </p>

    </div>

    <div class="nhsuk-warning-callout">

      <h3 class="nhsuk-warning-callout__label">

        <span role="text">

          <span class="nhsuk-u-visually-hidden">Important: 

          </span>

          School, nursery or work

        </span>

      </h3>

      <p>Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.

      </p>

    </div>

    <div class="nhsuk-care-card nhsuk-care-card--primary">

      <div class="nhsuk-care-card__heading-container">

        <h3 class="nhsuk-care-card__heading">

          <span role="text">

            <span class="nhsuk-u-visually-hidden">Non-urgent advice: 

            </span>Speak to a GP if:

          </span>

        </h3>

        <span class="nhsuk-care-card__arrow" aria-hidden="true">

        </span>

      </div>

      <div class="nhsuk-care-card__content">

        <ul>

          <li>you're not sure it's chickenpox

          </li>

          <li>the skin around the blisters is red, hot or painful (signs of infection)

          </li>

          <li>your child is 

            <a href="https://www.nhs.uk">dehydrated

            </a>

          </li>

          <li>you're concerned about your child or they get worse

          </li>

        </ul>

        <p>Tell the receptionist you think it's chickenpox before going in. They may recommend a special appointment time if other patients are at risk.

        </p>

      </div>

    </div>

    <div class="nhsuk-care-card nhsuk-care-card--urgent">

      <div class="nhsuk-care-card__heading-container">

        <h3 class="nhsuk-care-card__heading">

          <span role="text">

            <span class="nhsuk-u-visually-hidden">Urgent advice: 

            </span>Ask for an urgent GP appointment if:

          </span>

        </h3>

        <span class="nhsuk-care-card__arrow" aria-hidden="true">

        </span>

      </div>

      <div class="nhsuk-care-card__content">

        <ul>

          <li>you're an adult and have chickenpox

          </li>

          <li>you're pregnant and haven't had chickenpox before and you've been near someone with it 

          </li>

          <li>you have a weakened immune system and you've been near someone with chickenpox

          </li>

          <li>you think your newborn baby has chickenpox

          </li>

        </ul>

      </div>

    </div>

    <div class="nhsuk-care-card nhsuk-care-card--emergency">

      <div class="nhsuk-care-card__heading-container">

        <h3 class="nhsuk-care-card__heading">

          <span role="text">

            <span class="nhsuk-u-visually-hidden">Non-urgent advice: 

            </span>Call 999 if you have sudden chest pain that:

          </span>

        </h3>

        <span class="nhsuk-care-card__arrow" aria-hidden="true">

        </span>

      </div>

      <div class="nhsuk-care-card__content">

        <ul>

          <li>spreads to your arms, back, neck or jaw

          </li>

          <li>makes your chest feel tight or heavy

          </li>

          <li>also started with shortness of breath, sweating and feeling or being sick

          </li>

        </ul>

        <p>You could be having a 

          <a href="https://www.nhs.uk">heart attack

          </a>. Call 999 immediately as you need immediate treatment in hospital.

        </p>

      </div>

    </div>

    <div class="nhsuk-care-card nhsuk-care-card--immediate">

      <div class="nhsuk-care-card__heading-container">

        <h3 class="nhsuk-care-card__heading">

          <span role="text">

            <span class="nhsuk-u-visually-hidden">Immediate action required: 

            </span>Call 999 if you have sudden chest pain that:

          </span>

        </h3>

        <span class="nhsuk-care-card__arrow" aria-hidden="true">

        </span>

      </div>

      <div class="nhsuk-care-card__content">

        <ul>

          <li>spreads to your arms, back, neck or jaw

          </li>

          <li>makes your chest feel tight or heavy

          </li>

          <li>also started with shortness of breath, sweating and feeling or being sick

          </li>

        </ul>

        <p>You could be having a heart attack. Call 999 immediately as you need immediate treatment in hospital.

        </p>

      </div>

    </div>

    <figure class="nhsuk-image">

      <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/ABF9YH_GDGeL2X.2e16d0ba.fill-320x213.jpg" alt="Picture of allergic conjunctivitis">

      <figcaption class="nhsuk-image__caption">

        Itchy, red, watering eyes

      </figcaption>

    </figure>

    <figure class="nhsuk-image">

      <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/ABF9YH_GDGeL2X.2e16d0ba.fill-320x213.jpg" alt="Picture of allergic conjunctivitis">

      <figcaption class="nhsuk-image__caption">

        Itchy, red, watering eyes

      </figcaption>

    </figure>

    <div class="nhsuk-action-link">

      <a class="nhsuk-action-link__link" href="https://www.nhs.uk/service-search/minor-injuries-unit/locationsearch/551">

        <svg class="nhsuk-icon nhsuk-icon__arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">

          <path d="M0 0h24v24H0z" fill="none">

          </path>

          <path d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z">

          </path>

        </svg>

        <span class="nhsuk-action-link__text">Find a minor injuries unit

        </span>

      </a>

    </div>

    <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 sent to you by the NHS. This may include:

        </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>

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

          <tbody>

            <tr>

              <th>

                <strong>Day of the week

                </strong>

              </th>

              <th>

                <strong>Opening hours

                </strong>

              </th>

            </tr>

            <tr>

              <th>Monday

              </th>

              <td>9am to 6pm

              </td>

            </tr>

            <tr>

              <th>Tuesday

              </th>

              <td>9am to 6pm

              </td>

            </tr>

            <tr>

              <th>Wednesday

              </th>

              <td>9am to 6pm

              </td>

            </tr>

            <tr>

              <th>Thursday

              </th>

              <td>9am to 6pm

              </td>

            </tr>

            <tr>

              <th>Friday

              </th>

              <td>9am to 6pm

              </td>

            </tr>

            <tr>

              <th>Saturday

              </th>

              <td>9am to 1pm

              </td>

            </tr>

            <tr>

              <th>Sunday

              </th>

              <td>Closed

              </td>

            </tr>

          </tbody>

        </table>

      </div>

    </details>

    <div class="nhsuk-expander-group">

      <details class="nhsuk-details nhsuk-expander">

        <summary class="nhsuk-details__summary">

          <span class="nhsuk-details__summary-text">

            How to measure your blood glucose levels

          </span>

        </summary>

        <div class="nhsuk-details__text">

          <p>Testing your blood at home is quick and easy, although it can be uncomfortable. It does get better.

          </p>

          <p>You would have been given:

          </p>

          <ul>

            <li>a blood glucose metre

            </li>

            <li>small needles called lancets

            </li>

            <li>a plastic pen to hold the lancest

            </li>

            <li>small test strips

            </li>

          </ul>

        </div>

      </details>

      <details class="nhsuk-details nhsuk-expander">

        <summary class="nhsuk-details__summary">

          <span class="nhsuk-details__summary-text">

            When to check your blood glucose level

          </span>

        </summary>

        <div class="nhsuk-details__text">

          <p>Try to check your blood:

          </p>

          <ul>

            <li>before meals

            </li>

            <li>2 to 3 hours after meals

            </li>

            <li>before, during (take a break) and after exercise

            </li>

          </ul>

          <p>This helps you understand your blood glucose levels and how they’re affected by meals and exercise. It should help you have more stable blood glucose levels.

          </p>

        </div>

      </details>

    </div>

    <nav class="nhsuk-pagination" role="navigation" aria-label="Pagination">

      <ul class="nhsuk-list nhsuk-pagination__list">

        <li class="nhsuk-pagination-item--previous">

          <a class="nhsuk-pagination__link nhsuk-pagination__link--prev" href="/section/treatments">

            <span class="nhsuk-pagination__title">Previous

            </span>

            <span class="nhsuk-u-visually-hidden">:

            </span>

            <span class="nhsuk-pagination__page">Treatments

            </span>

            <svg class="nhsuk-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">

              <path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z">

              </path>

            </svg>

          </a>

        </li>

        <li class="nhsuk-pagination-item--next">

          <a class="nhsuk-pagination__link nhsuk-pagination__link--next" href="/section/symptoms">

            <span class="nhsuk-pagination__title">Next

            </span>

            <span class="nhsuk-u-visually-hidden">:

            </span>

            <span class="nhsuk-pagination__page">Symptoms

            </span>

            <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">

              <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z">

              </path>

            </svg>

          </a>

        </li>

      </ul>

    </nav>

    <div class="nhsuk-do-dont-list">

      <h3 class="nhsuk-do-dont-list__label">Do

      </h3>

      <ul class="nhsuk-list nhsuk-list--tick">

        <li>

          <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" >

            <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12">

            </path>

          </svg>

          cover blisters that are likely to burst with a soft plaster or dressing

        </li>

        <li>

          <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" >

            <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12">

            </path>

          </svg>

          wash your hands before touching a burst blister

        </li>

        <li>

          <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" >

            <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12">

            </path>

          </svg>

          allow the fluid in a burst blister to drain before covering it with a plaster or dressing

        </li>

      </ul>

    </div>

    <div class="nhsuk-do-dont-list">

      <h3 class="nhsuk-do-dont-list__label">Don&#39;t

      </h3>

      <ul class="nhsuk-list nhsuk-list--cross">

        <li>

          <svg class="nhsuk-icon nhsuk-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">

            <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z">

            </path>

            <path d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z">

            </path>

          </svg>

          do not burst a blister yourself

        </li>

        <li>

          <svg class="nhsuk-icon nhsuk-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">

            <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z">

            </path>

            <path d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z">

            </path>

          </svg>

          do not peel the skin off a burst blister

        </li>

        <li>

          <svg class="nhsuk-icon nhsuk-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">

            <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z">

            </path>

            <path d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z">

            </path>

          </svg>

          do not pick at the edges of the remaining skin

        </li>

        <li>

          <svg class="nhsuk-icon nhsuk-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">

            <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z">

            </path>

            <path d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z">

            </path>

          </svg>

          do not wear the shoes or use the equipment that caused your blister until it heals

        </li>

      </ul>

    </div>

    <table>

      <caption>Skin symptoms and possible causes

      </caption>

      <thead>

        <tr>

          <th scope="col">Skin symptoms

          </th>

          <th scope="col">Possible cause

          </th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <td>Blisters on lips or around the mouth

          </td>

          <td>cold sores

          </td>

        </tr>

        <tr>

          <td>Itchy, dry, cracked, sore

          </td>

          <td>eczema

          </td>

        </tr>

        <tr>

          <td>Itchy blisters

          </td>

          <td>shingles, chickenpox

          </td>

        </tr>

      </tbody>

    </table>

    <table class="nhsuk-table">

      <caption class="nhsuk-table__caption">Skin symptoms and possible causes

      </caption>

      <thead role="rowgroup" class="nhsuk-table__head">

        <tr role="row">

          <th role="columnheader" class="" scope="col">

            Skin symptoms

          </th>

          <th role="columnheader" class="" scope="col">

            Possible cause

          </th>

        </tr>

      </thead>

      <tbody class="nhsuk-table__body">

        <tr role="row" class="nhsuk-table__row" >

          <td class="nhsuk-table__cell">Blisters on lips or around the mouth

          </td>

          <td class="nhsuk-table__cell ">cold sores

          </td>

        </tr>

        <tr role="row" class="nhsuk-table__row" >

          <td class="nhsuk-table__cell">Itchy, dry, cracked, sore

          </td>

          <td class="nhsuk-table__cell ">eczema

          </td>

        </tr>

        <tr role="row" class="nhsuk-table__row" >

          <td class="nhsuk-table__cell">Itchy blisters

          </td>

          <td class="nhsuk-table__cell ">shingles, chickenpox

          </td>

        </tr>

      </tbody>

    </table>

    <div class="nhsuk-table__panel-with-heading-tab">

      <h3 class="nhsuk-table__heading-tab">Skin symptoms and possible causes

      </h3>

      <table class="nhsuk-table">

        <caption class="nhsuk-table__caption">Skin symptoms and possible causes

        </caption>

        <thead role="rowgroup" class="nhsuk-table__head">

          <tr role="row">

            <th role="columnheader" class="" scope="col">

              Skin symptoms

            </th>

            <th role="columnheader" class="" scope="col">

              Possible cause

            </th>

          </tr>

        </thead>

        <tbody class="nhsuk-table__body">

          <tr role="row" class="nhsuk-table__row" >

            <td class="nhsuk-table__cell">Blisters on lips or around the mouth

            </td>

            <td class="nhsuk-table__cell ">cold sores

            </td>

          </tr>

          <tr role="row" class="nhsuk-table__row" >

            <td class="nhsuk-table__cell">Itchy, dry, cracked, sore

            </td>

            <td class="nhsuk-table__cell ">eczema

            </td>

          </tr>

          <tr role="row" class="nhsuk-table__row" >

            <td class="nhsuk-table__cell">Itchy blisters

            </td>

            <td class="nhsuk-table__cell ">shingles, chickenpox

            </td>

          </tr>

        </tbody>

      </table>

    </div>

    <dl class="nhsuk-summary-list">

      <div class="nhsuk-summary-list__row">

        <dt class="nhsuk-summary-list__key">

          Name

        </dt>

        <dd class="nhsuk-summary-list__value">

          Sarah Philips

        </dd>

        <dd class="nhsuk-summary-list__actions">

          <a href="#">

            Change

            <span class="nhsuk-u-visually-hidden"> name

            </span>

          </a>

        </dd>

      </div>

      <div class="nhsuk-summary-list__row">

        <dt class="nhsuk-summary-list__key">

          Date of birth

        </dt>

        <dd class="nhsuk-summary-list__value">

          5 January 1978

        </dd>

        <dd class="nhsuk-summary-list__actions">

          <a href="#">

            Change

            <span class="nhsuk-u-visually-hidden"> date of birth

            </span>

          </a>

        </dd>

      </div>

      <div class="nhsuk-summary-list__row">

        <dt class="nhsuk-summary-list__key">

          Contact information

        </dt>

        <dd class="nhsuk-summary-list__value">

          72 Guild Street

          <br>London

          <br>SE23 6FH

        </dd>

        <dd class="nhsuk-summary-list__actions">

          <a href="#">

            Change

            <span class="nhsuk-u-visually-hidden"> contact information

            </span>

          </a>

        </dd>

      </div>

      <div class="nhsuk-summary-list__row">

        <dt class="nhsuk-summary-list__key">

          Contact details

        </dt>

        <dd class="nhsuk-summary-list__value">

          <p>07700 900457

          </p>

          <p>sarah.philips@example.com

          </p>

        </dd>

        <dd class="nhsuk-summary-list__actions">

          <a href="#">

            Change

            <span class="nhsuk-u-visually-hidden"> contact details

            </span>

          </a>

        </dd>

      </div>

    </dl>

    <nav class="nhsuk-nav-a-z" id="nhsuk-nav-a-z" role="navigation" aria-label="A to Z Navigation">

      <ol class="nhsuk-nav-a-z__list" role="list">

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#A">A

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <span class="nhsuk-nav-a-z__link--disabled">B

          </span>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#C">C

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#D">D

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#E">E

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#F">F

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#G">G

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#H">H

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#I">I

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#J">J

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#K">K

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#L">L

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#M">M

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#N">N

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#O">O

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#P">P

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#Q">Q

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#R">R

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#S">S

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#T">T

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#U">U

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#V">V

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#W">W

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#X">X

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#Y">Y

          </a>

        </li>

        <li class="nhsuk-nav-a-z__item">

          <a class="nhsuk-nav-a-z__link" href="#Z">Z

          </a>

        </li>

      </ol>

    </nav>

    <div class="nhsuk-list-panel">

      <h2 class="nhsuk-list-panel__label" id="A">A

      </h2>

      <ul class="nhsuk-list-panel__list nhsuk-list-panel__list--with-label">

        <li class="nhsuk-list-panel__item">

          <a class="nhsuk-list-panel__link" href="/index">AAA

          </a>

        </li>

        <li class="nhsuk-list-panel__item">

          <a class="nhsuk-list-panel__link" href="/index">Abdominal aortic aneurysm

          </a>

        </li>

        <li class="nhsuk-list-panel__item">

          <a class="nhsuk-list-panel__link" href="/index">Abscess

          </a>

        </li>

      </ul>

    </div>

    <div class="nhsuk-list-panel">

      <h2 class="nhsuk-list-panel__label" id="B">B

      </h2>

      <div class="nhsuk-list-panel__box nhsuk-list-panel__box--with-label">

        <p class="nhsuk-list-panel--results-items__no-results">There are currently no medicines listed

        </p>

      </div>

    </div>

    <div class="nhsuk-list-panel">

      <h2 class="nhsuk-list-panel__label" id="C">C

      </h2>

      <ul class="nhsuk-list-panel__list nhsuk-list-panel__list--with-label">

        <li class="nhsuk-list-panel__item">

          <a class="nhsuk-list-panel__link" href="/index">Chest pain

          </a>

        </li>

        <li class="nhsuk-list-panel__item">

          <a class="nhsuk-list-panel__link" href="/index">Cold sore

          </a>

        </li>

      </ul>

    </div>

    <div class="nhsuk-list-panel">

      <h2 class="nhsuk-list-panel__label" id="D">D

      </h2>

      <ul class="nhsuk-list-panel__list nhsuk-list-panel__list--with-label">

        <li class="nhsuk-list-panel__item">

          <a class="nhsuk-list-panel__link" href="/index">Dandruff

          </a>

        </li>

        <li class="nhsuk-list-panel__item">

          <a class="nhsuk-list-panel__link" href="/index">Dementia

          </a>

        </li>

        <li class="nhsuk-list-panel__item">

          <a class="nhsuk-list-panel__link" href="/index">Dental pain

          </a>

        </li>

      </ul>

    </div>

    <table class="nhsuk-table">

      <thead class="nhsuk-table__head">

        <tr class="nhsuk-table__row">

          <th class="nhsuk-table__header" scope="col">Class name

          </th>

          <th class="nhsuk-table__header" scope="col" style="width: 120px">Tag

          </th>

        </tr>

      </thead>

      <tbody class="nhsuk-table__body">

        <tr class="nhsuk-table__row">

          <td class="nhsuk-table__cell">

            <code> nhsuk-tag

            </code>

          </td>

          <td class="nhsuk-table__cell">

            <strong class="nhsuk-tag">

              Active

            </strong>

          </td>

        </tr>

        <tr class="nhsuk-table__row">

          <td class="nhsuk-table__cell">

            <code> nhsuk-tag--white 

            </code>

          </td>

          <td class="nhsuk-table__cell">

            <strong class="nhsuk-tag nhsuk-tag--white">

              Started

            </strong>

          </td>

        </tr>

        <tr class="nhsuk-table__row">

          <td class="nhsuk-table__cell">

            <code> nhsuk-tag--grey 

            </code>

          </td>

          <td class="nhsuk-table__cell">

            <strong class="nhsuk-tag nhsuk-tag--grey">

              Not started

            </strong>

          </td>

        </tr>

        <tr class="nhsuk-table__row">

          <td class="nhsuk-table__cell">

            <code> nhsuk-tag--green 

            </code>

          </td>

          <td class="nhsuk-table__cell">

            <strong class="nhsuk-tag nhsuk-tag--green">

              New

            </strong>

          </td>

        </tr>

        <tr class="nhsuk-table__row">

          <td class="nhsuk-table__cell">

            <code> nhsuk-tag--aqua-green 

            </code>

          </td>

          <td class="nhsuk-table__cell">

            <strong class="nhsuk-tag nhsuk-tag--aqua-green">

              Active

            </strong>

          </td>

        </tr>

        <tr class="nhsuk-table__row">

          <td class="nhsuk-table__cell">

            <code> nhsuk-tag--blue 

            </code>

          </td>

          <td class="nhsuk-table__cell">

            <strong class="nhsuk-tag nhsuk-tag--blue">

              Pending

            </strong>

          </td>

        </tr>

        <tr class="nhsuk-table__row">

          <td class="nhsuk-table__cell">

            <code> nhsuk-tag--purple 

            </code>

          </td>

          <td class="nhsuk-table__cell">

            <strong class="nhsuk-tag nhsuk-tag--purple">

              Received

            </strong>

          </td>

        </tr>

        <tr class="nhsuk-table__row">

          <td class="nhsuk-table__cell">

            <code> nhsuk-tag--pink 

            </code>

          </td>

          <td class="nhsuk-table__cell">

            <strong class="nhsuk-tag nhsuk-tag--pink">

              Sent

            </strong>

          </td>

        </tr>

        <tr class="nhsuk-table__row">

          <td class="nhsuk-table__cell">

            <code> nhsuk-tag--red 

            </code>

          </td>

          <td class="nhsuk-table__cell">

            <strong class="nhsuk-tag nhsuk-tag--red">

              Rejected

            </strong>

          </td>

        </tr>

        <tr class="nhsuk-table__row">

          <td class="nhsuk-table__cell">

            <code> nhsuk-tag--orange 

            </code>

          </td>

          <td class="nhsuk-table__cell">

            <strong class="nhsuk-tag nhsuk-tag--orange">

              Declined

            </strong>

          </td>

        </tr>

        <tr class="nhsuk-table__row">

          <td class="nhsuk-table__cell">

            <code> nhsuk-tag--yellow 

            </code>

          </td>

          <td class="nhsuk-table__cell">

            <strong class="nhsuk-tag nhsuk-tag--yellow">

              Delayed

            </strong>

          </td>

        </tr>

      </tbody>

    </table>

    <div class="nhsuk-form-group">

      <label class="nhsuk-label" for="input-example">

        National Insurance number

      </label>

      <input class="nhsuk-input nhsuk-input--width-20" id="input-example" name="test-name" type="text">

    </div>

    <div class="nhsuk-form-group nhsuk-form-group--error">

      <label class="nhsuk-label" for="input-with-error-message">

        National Insurance number

      </label>

      <div class="nhsuk-hint" id="input-with-error-message-hint">

        It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

      </div>

      <span class="nhsuk-error-message" id="input-with-error-message-error">

        <span class="nhsuk-u-visually-hidden">Error:

        </span> Error message goes here

      </span>

      <input class="nhsuk-input nhsuk-input--width-20 nhsuk-input--error" id="input-with-error-message" name="test-name-3" type="text" aria-describedby="input-with-error-message-hint input-with-error-message-error">

    </div>

    <div class="nhsuk-form-group">

      <fieldset class="nhsuk-fieldset" aria-describedby="nationality-hint">

        <legend class="nhsuk-fieldset__legend">

          What is your nationality?

        </legend>

        <div class="nhsuk-hint" id="nationality-hint">

          If you have more than 1 nationality, select all options that are relevant to you.

        </div>

        <div class="nhsuk-checkboxes">

          <div class="nhsuk-checkboxes__item">

            <input class="nhsuk-checkboxes__input" id="nationality-1" name="nationality" type="checkbox" value="british">

            <label class="nhsuk-label nhsuk-checkboxes__label" for="nationality-1">

              British

            </label>

          </div>

          <div class="nhsuk-checkboxes__item">

            <input class="nhsuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish">

            <label class="nhsuk-label nhsuk-checkboxes__label" for="nationality-2">

              Irish

            </label>

          </div>

          <div class="nhsuk-checkboxes__item">

            <input class="nhsuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other">

            <label class="nhsuk-label nhsuk-checkboxes__label" for="nationality-3">

              citizen of another country

            </label>

          </div>

        </div>

      </fieldset>

    </div>

    <div class="nhsuk-form-group">

      <fieldset class="nhsuk-fieldset" aria-describedby="example-hint">

        <legend class="nhsuk-fieldset__legend">

          Have you changed your name?

        </legend>

        <div class="nhsuk-hint" id="example-hint">

          This includes changing your last name or spelling your name differently.

        </div>

        <div class="nhsuk-radios">

          <div class="nhsuk-radios__item">

            <input class="nhsuk-radios__input" id="example-1" name="example" type="radio" value="yes">

            <label class="nhsuk-label nhsuk-radios__label" for="example-1">

              Yes

            </label>

          </div>

          <div class="nhsuk-radios__item">

            <input class="nhsuk-radios__input" id="example-2" name="example" type="radio" value="no" checked>

            <label class="nhsuk-label nhsuk-radios__label" for="example-2">

              No

            </label>

          </div>

        </div>

      </fieldset>

    </div>

    <div class="nhsuk-form-group">

      <fieldset class="nhsuk-fieldset" aria-describedby="dob-hint" role="group">

        <legend class="nhsuk-fieldset__legend">

          What is your date of birth?

        </legend>

        <div class="nhsuk-hint" id="dob-hint">

          For example, 31 3 1980

        </div>

        <div class="nhsuk-date-input" id="dob">

          <div class="nhsuk-date-input__item">

            <div class="nhsuk-form-group">

              <label class="nhsuk-label nhsuk-date-input__label" for="dob-day">

                Day

              </label>

              <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="dob-day" name="dob-day" type="text" pattern="[0-9]*" inputmode="numeric">

            </div>

          </div>

          <div class="nhsuk-date-input__item">

            <div class="nhsuk-form-group">

              <label class="nhsuk-label nhsuk-date-input__label" for="dob-month">

                Month

              </label>

              <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="dob-month" name="dob-month" type="text" pattern="[0-9]*" inputmode="numeric">

            </div>

          </div>

          <div class="nhsuk-date-input__item">

            <div class="nhsuk-form-group">

              <label class="nhsuk-label nhsuk-date-input__label" for="dob-year">

                Year

              </label>

              <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-4" id="dob-year" name="dob-year" type="text" pattern="[0-9]*" inputmode="numeric">

            </div>

          </div>

        </div>

      </fieldset>

    </div>

    <div class="nhsuk-form-group">

      <label class="nhsuk-label" for="more-detail">

        Can you provide more detail?

      </label>

      <div class="nhsuk-hint" id="more-detail-hint">

        Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.

      </div>

      <textarea class="nhsuk-textarea" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint">

      </textarea>

    </div>

    <div class="nhsuk-form-group">

      <label class="nhsuk-label" for="select-1">

        Label text goes here

      </label>

      <select class="nhsuk-select" id="select-1" name="select-1">

        <option value="1">NHS.UK frontend option 1

        </option>

        <option value="2" selected>NHS.UK frontend option 2

        </option>

        <option value="3" disabled>NHS.UK frontend option 3

        </option>

      </select>

    </div>

    <div class="nhsuk-form-group">

      <button class="nhsuk-button nhsuk-u-margin-bottom-0" type="submit">

        Save and continue

      </button>

    </div>

    <div class="nhsuk-form-group">

      <button class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-bottom-0" type="submit">

        Find my location

      </button>

    </div>

    <div class="nhsuk-back-link">

      <a class="nhsuk-back-link__link" href="#">

        <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">

          <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z">

          </path>

        </svg>

        Go back

      </a>

    </div>

  </div>

</div>