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.

Images

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

Images default

Open this example in a new tab: Images default

No specific amount of time is recommended, but a typical training session could take less than 20 minutes.
Code

Markup

<figure class="nhsuk-image">
  <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg" alt="">
  <figcaption class="nhsuk-image__caption">
    No specific amount of time is recommended, but a typical training session could take less than 20 minutes.
  </figcaption>
</figure>

Macro

{% from "images/macro.njk" import image -%}

{{ image({
  src: "https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg",
  caption: {
    text: "No specific amount of time is recommended, but a typical training session could take less than 20 minutes."
  }
}) }}

Images without caption

Open this example in a new tab: Images without caption

Close-up of a person's tummy showing a number of creases in the skin under their belly button. Shown on light brown skin.
Code

Markup

<figure class="nhsuk-image">
  <img class="nhsuk-image__img" src="https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg" alt="Close-up of a person&#39;s tummy showing a number of creases in the skin under their belly button. Shown on light brown skin.">
</figure>

Macro

{% from "images/macro.njk" import image -%}

{{ image({
  src: "https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg",
  alt: "Close-up of a person's tummy showing a number of creases in the skin under their belly button. Shown on light brown skin."
}) }}

Images with srcset

Open this example in a new tab: Images with srcset

Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time.
Code

Markup

<figure class="nhsuk-image">
  <img class="nhsuk-image__img" src="https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg" alt="" sizes="(max-width: 768px) 100vw, 66vw" srcset="https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg 600w, https://service-manual.nhs.uk/assets/image-example-stretch-marks-1000w.jpg 1000w">
  <figcaption class="nhsuk-image__caption">
    Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time.
  </figcaption>
</figure>

Macro

{% from "images/macro.njk" import image -%}

{{ image({
  src: "https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg",
  sizes: "(max-width: 768px) 100vw, 66vw",
  srcset:
    "https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg 600w, https://service-manual.nhs.uk/assets/image-example-stretch-marks-1000w.jpg 1000w",
  caption: {
    text: "Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time."
  }
}) }}

Images with srcset and alt text

Open this example in a new tab: Images with srcset and alt text

Close-up of a person's tummy showing a number of creases in the skin under their belly button. Shown on light brown skin.
Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time.
Code

Markup

<figure class="nhsuk-image">
  <img class="nhsuk-image__img" src="https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg" alt="Close-up of a person&#39;s tummy showing a number of creases in the skin under their belly button. Shown on light brown skin." sizes="(max-width: 768px) 100vw, 66vw" srcset="https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg 600w, https://service-manual.nhs.uk/assets/image-example-stretch-marks-1000w.jpg 1000w">
  <figcaption class="nhsuk-image__caption">
    Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time.
  </figcaption>
</figure>

Macro

{% from "images/macro.njk" import image -%}

{{ image({
  src: "https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg",
  sizes: "(max-width: 768px) 100vw, 66vw",
  srcset:
    "https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg 600w, https://service-manual.nhs.uk/assets/image-example-stretch-marks-1000w.jpg 1000w",
  alt: "Close-up of a person's tummy showing a number of creases in the skin under their belly button. Shown on light brown skin.",
  caption: {
    text: "Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time."
  }
}) }}