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

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."
  }
}) }}

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."
}) }}