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="/nhsuk-frontend/assets/example-image-exercise.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: "/nhsuk-frontend/assets/example-image-exercise.jpg",
  caption: {
    text: "No specific amount of time is recommended, but a typical training session could take less than 20 minutes."
  }
}) }}

Images with one-quarter width

Open this example in a new tab: Images with one-quarter width

A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.
Code

Markup

<figure class="nhsuk-image nhsuk-u-width-one-quarter">
  <img class="nhsuk-image__img" src="/nhsuk-frontend/assets/example-image-exercise.jpg" alt="A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.">
</figure>

Macro

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

{{ image({
  src: "/nhsuk-frontend/assets/example-image-exercise.jpg",
  alt: "A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.",
  width: "one-quarter"
}) }}

Images with one-third width

Open this example in a new tab: Images with one-third width

A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.
Code

Markup

<figure class="nhsuk-image nhsuk-u-width-one-third">
  <img class="nhsuk-image__img" src="/nhsuk-frontend/assets/example-image-exercise.jpg" alt="A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.">
</figure>

Macro

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

{{ image({
  src: "/nhsuk-frontend/assets/example-image-exercise.jpg",
  alt: "A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.",
  width: "one-third"
}) }}

Images with one-half width

Open this example in a new tab: Images with one-half width

A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.
Code

Markup

<figure class="nhsuk-image nhsuk-u-width-one-half">
  <img class="nhsuk-image__img" src="/nhsuk-frontend/assets/example-image-exercise.jpg" alt="A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.">
</figure>

Macro

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

{{ image({
  src: "/nhsuk-frontend/assets/example-image-exercise.jpg",
  alt: "A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.",
  width: "one-half"
}) }}

Images with two-thirds width

Open this example in a new tab: Images with two-thirds width

A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.
Code

Markup

<figure class="nhsuk-image nhsuk-u-width-two-thirds">
  <img class="nhsuk-image__img" src="/nhsuk-frontend/assets/example-image-exercise.jpg" alt="A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.">
</figure>

Macro

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

{{ image({
  src: "/nhsuk-frontend/assets/example-image-exercise.jpg",
  alt: "A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.",
  width: "two-thirds"
}) }}

Images with three-quarters width

Open this example in a new tab: Images with three-quarters width

A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.
Code

Markup

<figure class="nhsuk-image nhsuk-u-width-three-quarters">
  <img class="nhsuk-image__img" src="/nhsuk-frontend/assets/example-image-exercise.jpg" alt="A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.">
</figure>

Macro

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

{{ image({
  src: "/nhsuk-frontend/assets/example-image-exercise.jpg",
  alt: "A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.",
  width: "three-quarters"
}) }}

Images with full width

Open this example in a new tab: Images with full width

A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.
Code

Markup

<figure class="nhsuk-image nhsuk-u-width-full">
  <img class="nhsuk-image__img" src="/nhsuk-frontend/assets/example-image-exercise.jpg" alt="A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.">
</figure>

Macro

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

{{ image({
  src: "/nhsuk-frontend/assets/example-image-exercise.jpg",
  alt: "A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.",
  width: "full"
}) }}

Images with custom HTML

Open this example in a new tab: Images with custom HTML

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 src="/nhsuk-frontend/assets/example-image-exercise.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 -%}

{% call image({
  caption: {
    text: "No specific amount of time is recommended, but a typical training session could take less than 20 minutes."
  }
}) %}
<img src="/nhsuk-frontend/assets/example-image-exercise.jpg" alt="">
{%- endcall %}

Images without background

Open this example in a new tab: Images without background

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

Markup

<figure class="nhsuk-image nhsuk-image--no-background">
  <img class="nhsuk-image__img" src="/nhsuk-frontend/assets/example-image-exercise.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({
  background: false,
  src: "/nhsuk-frontend/assets/example-image-exercise.jpg",
  caption: {
    text: "No specific amount of time is recommended, but a typical training session could take less than 20 minutes."
  }
}) }}

Images without background, border or caption

Open this example in a new tab: Images without background, border or caption

A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.
Code

Markup

<figure class="nhsuk-image nhsuk-image--no-border nhsuk-image--no-background">
  <img class="nhsuk-image__img" src="/nhsuk-frontend/assets/example-image-exercise.jpg" alt="A person in a bright pink athletic top, listening to music, pauses for thought during a short training session.">
</figure>

Macro

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

{{ image({
  background: false,
  border: false,
  src: "/nhsuk-frontend/assets/example-image-exercise.jpg",
  alt: "A person in a bright pink athletic top, listening to music, pauses for thought during a short training session."
}) }}

Images without border

Open this example in a new tab: Images without border

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

Markup

<figure class="nhsuk-image nhsuk-image--no-border">
  <img class="nhsuk-image__img" src="/nhsuk-frontend/assets/example-image-exercise.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({
  border: false,
  src: "/nhsuk-frontend/assets/example-image-exercise.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="/nhsuk-frontend/assets/example-image-stretch-marks-1000w.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: "/nhsuk-frontend/assets/example-image-stretch-marks-1000w.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="/nhsuk-frontend/assets/example-image-stretch-marks-600w.jpg" alt="" sizes="(max-width: 768px) 100vw, 66vw" srcset="/nhsuk-frontend/assets/example-image-stretch-marks-600w.jpg 600w, /nhsuk-frontend/assets/example-image-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: "/nhsuk-frontend/assets/example-image-stretch-marks-600w.jpg",
  sizes: "(max-width: 768px) 100vw, 66vw",
  srcset:
    "/nhsuk-frontend/assets/example-image-stretch-marks-600w.jpg 600w, /nhsuk-frontend/assets/example-image-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="/nhsuk-frontend/assets/example-image-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="/nhsuk-frontend/assets/example-image-stretch-marks-600w.jpg 600w, /nhsuk-frontend/assets/example-image-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: "/nhsuk-frontend/assets/example-image-stretch-marks-600w.jpg",
  sizes: "(max-width: 768px) 100vw, 66vw",
  srcset:
    "/nhsuk-frontend/assets/example-image-stretch-marks-600w.jpg 600w, /nhsuk-frontend/assets/example-image-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."
  }
}) }}