ComponentImages

14 of 14 upstream examples match. Razor component: <NhsukImages>

Default

Matches upstream

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

Razor Pages and MVC

<nhsuk-images
    src="/nhsuk-frontend/assets/example-image-exercise.jpg"
    caption="No specific amount of time is recommended, but a typical training session could take less than 20 minutes."
/>

Blazor

<NhsukImages
    Src="/nhsuk-frontend/assets/example-image-exercise.jpg"
    Caption="@(new ImagesCaptionOptions
    {
        Text = "No specific amount of time is recommended, but a typical training session could take less than 20 minutes.",
    })"
/>

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

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

Width

Matches upstream

with one-quarter

Open on its own page (opens in new tab)

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

Razor Pages and MVC

<nhsuk-images
    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"
/>

Blazor

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

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

{{ images({
  "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"
}) }}

Width

Matches upstream

with one-third

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-images
    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"
/>

Blazor

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

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

{{ images({
  "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"
}) }}

Width

Matches upstream

with one-half

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-images
    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"
/>

Blazor

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

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

{{ images({
  "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"
}) }}

Width

Matches upstream

with two-thirds

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-images
    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"
/>

Blazor

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

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

{{ images({
  "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"
}) }}

Width

Matches upstream

with three-quarters

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-images
    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"
/>

Blazor

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

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

{{ images({
  "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"
}) }}

Width

Matches upstream

with full

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-images
    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"
/>

Blazor

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

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

{{ images({
  "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"
}) }}

With custom HTML

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-images
    caption="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="">
</nhsuk-images>

Blazor

<NhsukImages
    Caption="@("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="">
</NhsukImages>

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

{% call images({
  "caption": "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 %}

Without background

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-images
    background="@("false")"
    src="/nhsuk-frontend/assets/example-image-exercise.jpg"
    caption="No specific amount of time is recommended, but a typical training session could take less than 20 minutes."
/>

Blazor

<NhsukImages
    Background="@("false")"
    Src="/nhsuk-frontend/assets/example-image-exercise.jpg"
    Caption="@("No specific amount of time is recommended, but a typical training session could take less than 20 minutes.")"
/>

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

{{ images({
  "background": false,
  "src": "/nhsuk-frontend/assets/example-image-exercise.jpg",
  "caption": "No specific amount of time is recommended, but a typical training session could take less than 20 minutes."
}) }}

Without background, border or caption

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-images
    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."
/>

Blazor

<NhsukImages
    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."
/>

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

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

Without border

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-images
    border="false"
    src="/nhsuk-frontend/assets/example-image-exercise.jpg"
    caption="No specific amount of time is recommended, but a typical training session could take less than 20 minutes."
/>

Blazor

<NhsukImages
    Border="false"
    Src="/nhsuk-frontend/assets/example-image-exercise.jpg"
    Caption="@("No specific amount of time is recommended, but a typical training session could take less than 20 minutes.")"
/>

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

{{ images({
  "border": false,
  "src": "/nhsuk-frontend/assets/example-image-exercise.jpg",
  "caption": "No specific amount of time is recommended, but a typical training session could take less than 20 minutes."
}) }}

Without caption

Matches upstream

Open on its own page (opens in new tab)

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

Razor Pages and MVC

<nhsuk-images
    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."
/>

Blazor

<NhsukImages
    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."
/>

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

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

With srcset

Matches upstream

Open on its own page (opens in new tab)

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

Razor Pages and MVC

<nhsuk-images
    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="Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time."
/>

Blazor

<NhsukImages
    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="@("Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time.")"
/>

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

{{ images({
  "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": "Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time."
}) }}

With srcset and alt text

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-images
    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="Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time."
/>

Blazor

<NhsukImages
    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="@("Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time.")"
/>

Nunjucks (upstream)

{% from "nhsuk/components/images/macro.njk" import images %}

{{ images({
  "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": "Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time."
}) }}