ComponentHeading

33 of 33 upstream examples match. Razor component: <NhsukHeading>

Default

Matches upstream

What is your full name?

Razor Pages and MVC

<nhsuk-heading text="What is your full name?" size="l" />

Blazor

<NhsukHeading Text="What is your full name?" Size="l" />

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your full name?",
  "size": "l"
}) }}

Size class

Matches upstream

Open on its own page (opens in new tab)

What is your full name?

Razor Pages and MVC

<nhsuk-heading text="What is your full name?" classes="nhsuk-heading-l" />

Blazor

<NhsukHeading Text="What is your full name?" Classes="nhsuk-heading-l" />

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your full name?",
  "classes": "nhsuk-heading-l"
}) }}

Size class overriding size option

Matches upstream

Open on its own page (opens in new tab)

What is your full name?

Razor Pages and MVC

<nhsuk-heading text="What is your full name?" classes="nhsuk-heading-l" size="s" />

Blazor

<NhsukHeading Text="What is your full name?" Classes="nhsuk-heading-l" Size="s" />

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your full name?",
  "classes": "nhsuk-heading-l",
  "size": "s"
}) }}

Text

Matches upstream

with size S

Open on its own page (opens in new tab)

What is your full name?

Razor Pages and MVC

<nhsuk-heading text="What is your full name?" size="s" />

Blazor

<NhsukHeading Text="What is your full name?" Size="s" />

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your full name?",
  "size": "s"
}) }}

Text

Matches upstream

with size M

Open on its own page (opens in new tab)

What is your full name?

Razor Pages and MVC

<nhsuk-heading text="What is your full name?" size="m" />

Blazor

<NhsukHeading Text="What is your full name?" Size="m" />

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your full name?",
  "size": "m"
}) }}

Text

Matches upstream

with size L

Open on its own page (opens in new tab)

What is your full name?

Razor Pages and MVC

<nhsuk-heading text="What is your full name?" size="l" />

Blazor

<NhsukHeading Text="What is your full name?" Size="l" />

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your full name?",
  "size": "l"
}) }}

Text

Matches upstream

with size XL

Open on its own page (opens in new tab)

What is your full name?

Razor Pages and MVC

<nhsuk-heading text="What is your full name?" size="xl" />

Blazor

<NhsukHeading Text="What is your full name?" Size="xl" />

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your full name?",
  "size": "xl"
}) }}

Text and caption

Matches upstream

with size S

Open on its own page (opens in new tab)

About youWhat is your home address?

Razor Pages and MVC

<nhsuk-heading text="What is your home address?" caption="About you" size="s" />

Blazor

<NhsukHeading Text="What is your home address?" Caption="@("About you")" Size="s" />

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": "About you",
  "size": "s"
}) }}

Text and caption

Matches upstream

with size M

Open on its own page (opens in new tab)

About youWhat is your home address?

Razor Pages and MVC

<nhsuk-heading text="What is your home address?" caption="About you" size="m" />

Blazor

<NhsukHeading Text="What is your home address?" Caption="@("About you")" Size="m" />

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": "About you",
  "size": "m"
}) }}

Text and caption

Matches upstream

with size L

Open on its own page (opens in new tab)

About youWhat is your home address?

Razor Pages and MVC

<nhsuk-heading text="What is your home address?" caption="About you" size="l" />

Blazor

<NhsukHeading Text="What is your home address?" Caption="@("About you")" Size="l" />

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": "About you",
  "size": "l"
}) }}

Text and caption

Matches upstream

with size XL

Open on its own page (opens in new tab)

About youWhat is your home address?

Razor Pages and MVC

<nhsuk-heading text="What is your home address?" caption="About you" size="xl" />

Blazor

<NhsukHeading Text="What is your home address?" Caption="@("About you")" Size="xl" />

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": "About you",
  "size": "xl"
}) }}

Text and caption "after"

Matches upstream

with size S

Open on its own page (opens in new tab)

What is your home address?

About you

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
    })"
    size="s"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
    })"
    Size="s"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "after"
  },
  "size": "s"
}) }}

Text and caption "after"

Matches upstream

with size M

Open on its own page (opens in new tab)

What is your home address?

About you

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
    })"
    size="m"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
    })"
    Size="m"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "after"
  },
  "size": "m"
}) }}

Text and caption "after"

Matches upstream

with size L

Open on its own page (opens in new tab)

What is your home address?

About you

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
    })"
    size="l"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
    })"
    Size="l"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "after"
  },
  "size": "l"
}) }}

Text and caption "after"

Matches upstream

with size XL

Open on its own page (opens in new tab)

What is your home address?

About you

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
    })"
    size="xl"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
    })"
    Size="xl"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "after"
  },
  "size": "xl"
}) }}

Text and caption "after" as a paragraph

Matches upstream

Open on its own page (opens in new tab)

What is your home address?

About you

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    size="l"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    Size="l"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "after",
    "element": "p"
  },
  "size": "l"
}) }}

Text and caption "before"

Matches upstream

with size S

Open on its own page (opens in new tab)

About you

What is your home address?

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
    })"
    size="s"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
    })"
    Size="s"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "before"
  },
  "size": "s"
}) }}

Text and caption "before"

Matches upstream

with size M

Open on its own page (opens in new tab)

About you

What is your home address?

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
    })"
    size="m"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
    })"
    Size="m"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "before"
  },
  "size": "m"
}) }}

Text and caption "before"

Matches upstream

with size L

Open on its own page (opens in new tab)

About you

What is your home address?

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
    })"
    size="l"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
    })"
    Size="l"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "before"
  },
  "size": "l"
}) }}

Text and caption "before"

Matches upstream

with size XL

Open on its own page (opens in new tab)

About you

What is your home address?

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
    })"
    size="xl"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
    })"
    Size="xl"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "before"
  },
  "size": "xl"
}) }}

Text and caption "before" as a heading

Matches upstream

Open on its own page (opens in new tab)

About you

What is your home address?

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
        Element = "h2",
    })"
    size="l"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
        Element = "h2",
    })"
    Size="l"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "before",
    "element": "h2"
  },
  "size": "l"
}) }}

Text and caption "end"

Matches upstream

with size S

Open on its own page (opens in new tab)

What is your home address?About you

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "end",
    })"
    size="s"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "end",
    })"
    Size="s"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "end"
  },
  "size": "s"
}) }}

Text and caption "end"

Matches upstream

with size M

Open on its own page (opens in new tab)

What is your home address?About you

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "end",
    })"
    size="m"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "end",
    })"
    Size="m"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "end"
  },
  "size": "m"
}) }}

Text and caption "end"

Matches upstream

with size L

Open on its own page (opens in new tab)

What is your home address?About you

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "end",
    })"
    size="l"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "end",
    })"
    Size="l"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "end"
  },
  "size": "l"
}) }}

Text and caption "end"

Matches upstream

with size XL

Open on its own page (opens in new tab)

What is your home address?About you

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "end",
    })"
    size="xl"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "end",
    })"
    Size="xl"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "end"
  },
  "size": "xl"
}) }}

Text and caption "start"

Matches upstream

with size S

Open on its own page (opens in new tab)

About youWhat is your home address?

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "start",
    })"
    size="s"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "start",
    })"
    Size="s"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "start"
  },
  "size": "s"
}) }}

Text and caption "start"

Matches upstream

with size M

Open on its own page (opens in new tab)

About youWhat is your home address?

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "start",
    })"
    size="m"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "start",
    })"
    Size="m"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "start"
  },
  "size": "m"
}) }}

Text and caption "start"

Matches upstream

with size L

Open on its own page (opens in new tab)

About youWhat is your home address?

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "start",
    })"
    size="l"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "start",
    })"
    Size="l"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "start"
  },
  "size": "l"
}) }}

Text and caption "start"

Matches upstream

with size XL

Open on its own page (opens in new tab)

About youWhat is your home address?

Razor Pages and MVC

<nhsuk-heading
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "start",
    })"
    size="xl"
/>

Blazor

<NhsukHeading
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "start",
    })"
    Size="xl"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "What is your home address?",
  "caption": {
    "text": "About you",
    "placement": "start"
  },
  "size": "xl"
}) }}

With link

Matches upstream

Open on its own page (opens in new tab)

Skin colour changes

Razor Pages and MVC

<nhsuk-heading text="Skin colour changes" href="#/result/1" size="l" />

Blazor

<NhsukHeading Text="Skin colour changes" Href="#/result/1" Size="l" />

Nunjucks (upstream)

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

{{ heading({
  "text": "Skin colour changes",
  "href": "#/result/1",
  "size": "l"
}) }}

With link and caption

Matches upstream

Open on its own page (opens in new tab)

A to Z of NHS health writingSkin colour changes

Razor Pages and MVC

<nhsuk-heading
    text="Skin colour changes"
    caption="A to Z of NHS health writing"
    href="#/result/1"
    size="l"
/>

Blazor

<NhsukHeading
    Text="Skin colour changes"
    Caption="@("A to Z of NHS health writing")"
    Href="#/result/1"
    Size="l"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "Skin colour changes",
  "caption": "A to Z of NHS health writing",
  "href": "#/result/1",
  "size": "l"
}) }}

With visually hidden text

Matches upstream

Open on its own page (opens in new tab)

Home address(Karen Francis)

Razor Pages and MVC

<nhsuk-heading text="Home address" visually-hidden-text="(Karen Francis)" size="l" />

Blazor

<NhsukHeading Text="Home address" VisuallyHiddenText="(Karen Francis)" Size="l" />

Nunjucks (upstream)

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

{{ heading({
  "text": "Home address",
  "visuallyHiddenText": "(Karen Francis)",
  "size": "l"
}) }}

With visually hidden text and caption

Matches upstream

Open on its own page (opens in new tab)

About youHome address(Karen Francis)

Razor Pages and MVC

<nhsuk-heading
    text="Home address"
    visually-hidden-text="(Karen Francis)"
    caption="About you"
    size="l"
/>

Blazor

<NhsukHeading
    Text="Home address"
    VisuallyHiddenText="(Karen Francis)"
    Caption="@("About you")"
    Size="l"
/>

Nunjucks (upstream)

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

{{ heading({
  "text": "Home address",
  "visuallyHiddenText": "(Karen Francis)",
  "caption": "About you",
  "size": "l"
}) }}