Skip to main content
All components

ComponentHero

12 of 12 upstream examples match. Razor component: <NhsukHero>

Hide the 1 test-only examples

Default

Matches upstream

Open on its own page (opens in new tab)

We're here for you

Helping you take control of your health and wellbeing.

Razor Pages and MVC 
<nhsuk-hero
    heading="We're here for you"
    text="Helping you take control of your health and wellbeing."
    border="false"
/>
Blazor 
<NhsukHero
    Heading="@(new HeroHeadingOptions
    {
        Text = "We're here for you",
    })"
    Text="Helping you take control of your health and wellbeing."
    Border="false"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/hero/macro.njk" import hero %}

{{ hero({
  "heading": {
    "text": "We're here for\u00A0you"
  },
  "text": "Helping you take control of your health and\u00A0wellbeing.",
  "border": false
}) }}

Heading

Matches upstream

with size L

Open on its own page (opens in new tab)

We're here for you

Helping you take control of your health and wellbeing.

Razor Pages and MVC 
<nhsuk-hero
    heading-options="@(new HeroHeadingOptions
    {
        Text = "We're here for you",
        Size = "l",
    })"
    text="Helping you take control of your health and wellbeing."
    border="false"
/>
Blazor 
<NhsukHero
    Heading="@(new HeroHeadingOptions
    {
        Text = "We're here for you",
        Size = "l",
    })"
    Text="Helping you take control of your health and wellbeing."
    Border="false"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/hero/macro.njk" import hero %}

{{ hero({
  "heading": {
    "text": "We're here for\u00A0you",
    "size": "l"
  },
  "text": "Helping you take control of your health and\u00A0wellbeing.",
  "border": false
}) }}

Heading

Matches upstream

with size XL

Open on its own page (opens in new tab)

We're here for you

Helping you take control of your health and wellbeing.

Razor Pages and MVC 
<nhsuk-hero
    heading-options="@(new HeroHeadingOptions
    {
        Text = "We're here for you",
        Size = "xl",
    })"
    text="Helping you take control of your health and wellbeing."
    border="false"
/>
Blazor 
<NhsukHero
    Heading="@(new HeroHeadingOptions
    {
        Text = "We're here for you",
        Size = "xl",
    })"
    Text="Helping you take control of your health and wellbeing."
    Border="false"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/hero/macro.njk" import hero %}

{{ hero({
  "heading": {
    "text": "We're here for\u00A0you",
    "size": "xl"
  },
  "text": "Helping you take control of your health and\u00A0wellbeing.",
  "border": false
}) }}

Heading

Matches upstream

with id attribute on

Open on its own page (opens in new tab)

We're here for you

Helping you take control of your health and wellbeing.

Razor Pages and MVC 
<nhsuk-hero
    heading-options="@(new HeroHeadingOptions
    {
        Text = "We're here for you",
        Id = "custom-id",
    })"
    text="Helping you take control of your health and wellbeing."
    border="false"
/>
Blazor 
<NhsukHero
    Heading="@(new HeroHeadingOptions
    {
        Text = "We're here for you",
        Id = "custom-id",
    })"
    Text="Helping you take control of your health and wellbeing."
    Border="false"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/hero/macro.njk" import hero %}

{{ hero({
  "heading": {
    "text": "We're here for\u00A0you",
    "id": "custom-id"
  },
  "text": "Helping you take control of your health and\u00A0wellbeing.",
  "border": false
}) }}

Product page

Matches upstream

Open on its own page (opens in new tab)

This is a header for the product or service

This is some more content which explains the product or service.

Sign up
Razor Pages and MVC 
<nhsuk-hero
    content="@([
        new HeroContentOptions
        {
            Heading = new HeroContentHeadingOptions
            {
                Text = "This is a header for the product or service",
                Size = "l",
            },
            Html = @"<p class=""nhsuk-body-l"">This is some more content which explains the product or service.</p>
<a class=""nhsuk-button nhsuk-button--reverse"" data-module=""nhsuk-button"" href=""#"" role=""button"" draggable=""false"">
  Sign up
</a>
",
        },
        new HeroContentOptions
        {
            Image = new ImagesOptions
            {
                Src = "/nhsuk-frontend/assets/example-hero-image.svg",
                Background = "false",
                Border = false,
            },
        },
    ])"
    border="false"
/>
Blazor 
<NhsukHero
    Content="@([
        new HeroContentOptions
        {
            Heading = new HeroContentHeadingOptions
            {
                Text = "This is a header for the product or service",
                Size = "l",
            },
            Html = @"<p class=""nhsuk-body-l"">This is some more content which explains the product or service.</p>
<a class=""nhsuk-button nhsuk-button--reverse"" data-module=""nhsuk-button"" href=""#"" role=""button"" draggable=""false"">
  Sign up
</a>
",
        },
        new HeroContentOptions
        {
            Image = new ImagesOptions
            {
                Src = "/nhsuk-frontend/assets/example-hero-image.svg",
                Background = "false",
                Border = false,
            },
        },
    ])"
    Border="false"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/hero/macro.njk" import hero %}

{{ hero({
  "content": [
    {
      "heading": {
        "text": "This is a header for the product or service",
        "size": "l"
      },
      "html": "<p class=\"nhsuk-body-l\">This is some more content which explains the product or service.</p>\n<a class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Sign up\n</a>\n"
    },
    {
      "image": {
        "src": "/nhsuk-frontend/assets/example-hero-image.svg",
        "background": false,
        "border": false
      }
    }
  ],
  "border": false
}) }}

Product page with heading as string

Matches upstream

Open on its own page (opens in new tab)

Product or service

This is some more content which explains the product or service.

Sign up
Razor Pages and MVC 
<nhsuk-hero
    content="@([
        new HeroContentOptions
        {
            Heading = "Product or service",
            Html = @"<p class=""nhsuk-body-l"">This is some more content which explains the product or service.</p>
<a class=""nhsuk-button nhsuk-button--reverse"" data-module=""nhsuk-button"" href=""#"" role=""button"" draggable=""false"">
  Sign up
</a>
",
        },
        new HeroContentOptions
        {
            Image = new ImagesOptions
            {
                Src = "/nhsuk-frontend/assets/example-hero-image.svg",
                Background = "false",
                Border = false,
            },
        },
    ])"
    border="false"
/>
Blazor 
<NhsukHero
    Content="@([
        new HeroContentOptions
        {
            Heading = "Product or service",
            Html = @"<p class=""nhsuk-body-l"">This is some more content which explains the product or service.</p>
<a class=""nhsuk-button nhsuk-button--reverse"" data-module=""nhsuk-button"" href=""#"" role=""button"" draggable=""false"">
  Sign up
</a>
",
        },
        new HeroContentOptions
        {
            Image = new ImagesOptions
            {
                Src = "/nhsuk-frontend/assets/example-hero-image.svg",
                Background = "false",
                Border = false,
            },
        },
    ])"
    Border="false"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/hero/macro.njk" import hero %}

{{ hero({
  "content": [
    {
      "heading": "Product or service",
      "html": "<p class=\"nhsuk-body-l\">This is some more content which explains the product or service.</p>\n<a class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n  Sign up\n</a>\n"
    },
    {
      "image": {
        "src": "/nhsuk-frontend/assets/example-hero-image.svg",
        "background": false,
        "border": false
      }
    }
  ],
  "border": false
}) }}

With heading and caption

Matches upstream

Open on its own page (opens in new tab)

SetupPrototyping

Razor Pages and MVC 
<nhsuk-hero
    heading-options="@(new HeroHeadingOptions
    {
        Text = "Prototyping",
        Caption = "Setup",
    })"
/>
Blazor 
<NhsukHero
    Heading="@(new HeroHeadingOptions
    {
        Text = "Prototyping",
        Caption = "Setup",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/hero/macro.njk" import hero %}

{{ hero({
  "heading": {
    "text": "Prototyping",
    "caption": "Setup"
  }
}) }}

With heading as string

Matches upstream

Open on its own page (opens in new tab)

Prototyping

Helping you take control of your health and wellbeing.

Razor Pages and MVC 
<nhsuk-hero
    heading="Prototyping"
    text="Helping you take control of your health and wellbeing."
    border="false"
/>
Blazor 
<NhsukHero
    Heading="@("Prototyping")"
    Text="Helping you take control of your health and wellbeing."
    Border="false"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/hero/macro.njk" import hero %}

{{ hero({
  "heading": "Prototyping",
  "text": "Helping you take control of your health and\u00A0wellbeing.",
  "border": false
}) }}

With heading only

Matches upstream

Open on its own page (opens in new tab)

Prototyping

Razor Pages and MVC 
<nhsuk-hero heading="Prototyping" />
Blazor 
<NhsukHero
    Heading="@(new HeroHeadingOptions
    {
        Text = "Prototyping",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/hero/macro.njk" import hero %}

{{ hero({
  "heading": {
    "text": "Prototyping"
  }
}) }}

With image

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-hero
    image="@(new HeroImageOptions
    {
        Src = "/nhsuk-frontend/assets/example-hero-background.jpg",
    })"
/>
Blazor 
<NhsukHero
    Image="@(new HeroImageOptions
    {
        Src = "/nhsuk-frontend/assets/example-hero-background.jpg",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/hero/macro.njk" import hero %}

{{ hero({
  "image": {
    "src": "/nhsuk-frontend/assets/example-hero-background.jpg"
  }
}) }}

With image, content

Matches upstream

Open on its own page (opens in new tab)

We're here for you

Helping you take control of your health and wellbeing.

Razor Pages and MVC 
<nhsuk-hero
    heading="We're here for you"
    text="Helping you take control of your health and wellbeing."
    image="@(new HeroImageOptions
    {
        Src = "/nhsuk-frontend/assets/example-hero-background.jpg",
    })"
/>
Blazor 
<NhsukHero
    Heading="@(new HeroHeadingOptions
    {
        Text = "We're here for you",
    })"
    Text="Helping you take control of your health and wellbeing."
    Image="@(new HeroImageOptions
    {
        Src = "/nhsuk-frontend/assets/example-hero-background.jpg",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/hero/macro.njk" import hero %}

{{ hero({
  "heading": {
    "text": "We're here for\u00A0you"
  },
  "text": "Helping you take control of your health and\u00A0wellbeing.",
  "image": {
    "src": "/nhsuk-frontend/assets/example-hero-background.jpg"
  }
}) }}

With image, content and caption

Matches upstream

Open on its own page (opens in new tab)

NHS website for EnglandFind information and services to help you manage your health

Razor Pages and MVC 
<nhsuk-hero
    heading-options="@(new HeroHeadingOptions
    {
        Text = "Find information and services to help you manage your health",
        Size = "l",
        Caption = new CaptionOptions
        {
            Text = "NHS website for England",
            Size = "xl",
        },
    })"
    width="three-quarters"
    image="@(new HeroImageOptions
    {
        Src = "/nhsuk-frontend/assets/example-hero-background.jpg",
    })"
/>
Blazor 
<NhsukHero
    Heading="@(new HeroHeadingOptions
    {
        Text = "Find information and services to help you manage your health",
        Size = "l",
        Caption = new CaptionOptions
        {
            Text = "NHS website for England",
            Size = "xl",
        },
    })"
    Width="three-quarters"
    Image="@(new HeroImageOptions
    {
        Src = "/nhsuk-frontend/assets/example-hero-background.jpg",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/hero/macro.njk" import hero %}

{{ hero({
  "heading": {
    "text": "Find information and services to help you manage your health",
    "size": "l",
    "caption": {
      "text": "NHS website for England",
      "size": "xl"
    }
  },
  "width": "three-quarters",
  "image": {
    "src": "/nhsuk-frontend/assets/example-hero-background.jpg"
  }
}) }}