Skip to main content
All components

ComponentLegend

27 of 27 upstream examples match. Razor component: <NhsukLegend>

Default

Matches upstream

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend heading="What is your address?" size="l" />
Blazor 
<NhsukLegend Heading="@("What is your address?")" Size="l" />
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "heading": "What is your address?",
  "size": "l"
}) }}

Size class

Matches upstream

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend heading="What is your address?" classes="nhsuk-fieldset__legend--l" />
Blazor 
<NhsukLegend
    Heading="@("What is your address?")"
    Classes="nhsuk-fieldset__legend--l"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "heading": "What is your address?",
  "classes": "nhsuk-fieldset__legend--l"
}) }}

Size class overriding size option

Matches upstream

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend
    heading="What is your address?"
    classes="nhsuk-fieldset__legend--l"
    size="s"
/>
Blazor 
<NhsukLegend
    Heading="@("What is your address?")"
    Classes="nhsuk-fieldset__legend--l"
    Size="s"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "heading": "What is your address?",
  "classes": "nhsuk-fieldset__legend--l",
  "size": "s"
}) }}

Text

Matches upstream

with size S

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend heading="What is your address?" size="s" />
Blazor 
<NhsukLegend Heading="@("What is your address?")" Size="s" />
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "heading": "What is your address?",
  "size": "s"
}) }}

Text

Matches upstream

with size M

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend heading="What is your address?" size="m" />
Blazor 
<NhsukLegend Heading="@("What is your address?")" Size="m" />
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "heading": "What is your address?",
  "size": "m"
}) }}

Text

Matches upstream

with size L

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend heading="What is your address?" size="l" />
Blazor 
<NhsukLegend Heading="@("What is your address?")" Size="l" />
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "heading": "What is your address?",
  "size": "l"
}) }}

Text

Matches upstream

with size XL

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend heading="What is your address?" size="xl" />
Blazor 
<NhsukLegend Heading="@("What is your address?")" Size="xl" />
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "heading": "What is your address?",
  "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-legend text="What is your home address?" caption="About you" size="s" />
Blazor 
<NhsukLegend Text="What is your home address?" Caption="@("About you")" Size="s" />
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "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-legend text="What is your home address?" caption="About you" size="m" />
Blazor 
<NhsukLegend Text="What is your home address?" Caption="@("About you")" Size="m" />
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "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-legend text="What is your home address?" caption="About you" size="l" />
Blazor 
<NhsukLegend Text="What is your home address?" Caption="@("About you")" Size="l" />
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "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-legend text="What is your home address?" caption="About you" size="xl" />
Blazor 
<NhsukLegend Text="What is your home address?" Caption="@("About you")" Size="xl" />
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

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

Text and caption "after" as a paragraph

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-legend
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    size="s"
/>
Blazor 
<NhsukLegend
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    Size="s"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

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

Text and caption "after" as a paragraph

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-legend
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    size="m"
/>
Blazor 
<NhsukLegend
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    Size="m"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

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

Text and caption "after" as a paragraph

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-legend
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    size="l"
/>
Blazor 
<NhsukLegend
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    Size="l"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

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

Text and caption "after" as a paragraph

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-legend
    text="What is your home address?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    size="xl"
/>
Blazor 
<NhsukLegend
    Text="What is your home address?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    Size="xl"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

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

With deprecated page heading

Matches upstream

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend
    text="What is your address?"
    size="m"
    options="@(new LegendOptions
    {
        IsPageHeading = true,
    })"
/>
Blazor 
<NhsukLegend Text="What is your address?" Size="m" IsPageHeading="true" />
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "text": "What is your address?",
  "size": "m",
  "isPageHeading": true
}) }}

With deprecated page heading overriding heading

Matches upstream

Open on its own page (opens in new tab)

What is your address?
Razor Pages and MVC 
<nhsuk-legend
    heading-options="@(new LegendHeadingOptions
    {
        Text = "What is your address?",
        Level = 3,
        Size = "s",
    })"
    options="@(new LegendOptions
    {
        IsPageHeading = false,
    })"
/>
Blazor 
<NhsukLegend
    Heading="@(new LegendHeadingOptions
    {
        Text = "What is your address?",
        Level = 3,
        Size = "s",
    })"
    IsPageHeading="false"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "heading": {
    "text": "What is your address?",
    "level": 3,
    "size": "s"
  },
  "isPageHeading": false
}) }}

With heading level 1

Matches upstream

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend
    text="What is your address?"
    size="l"
    heading-options="@(new LegendHeadingOptions
    {
        Level = 1,
    })"
/>
Blazor 
<NhsukLegend
    Text="What is your address?"
    Size="l"
    Heading="@(new LegendHeadingOptions
    {
        Level = 1,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "text": "What is your address?",
  "size": "l",
  "heading": {
    "level": 1
  }
}) }}

With heading level 2

Matches upstream

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend
    text="What is your address?"
    size="m"
    heading-options="@(new LegendHeadingOptions
    {
        Level = 2,
    })"
/>
Blazor 
<NhsukLegend
    Text="What is your address?"
    Size="m"
    Heading="@(new LegendHeadingOptions
    {
        Level = 2,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "text": "What is your address?",
  "size": "m",
  "heading": {
    "level": 2
  }
}) }}

With heading level 3

Matches upstream

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend
    text="What is your address?"
    size="s"
    heading-options="@(new LegendHeadingOptions
    {
        Level = 3,
    })"
/>
Blazor 
<NhsukLegend
    Text="What is your address?"
    Size="s"
    Heading="@(new LegendHeadingOptions
    {
        Level = 3,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "text": "What is your address?",
  "size": "s",
  "heading": {
    "level": 3
  }
}) }}

With heading options only

Matches upstream

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend
    heading-options="@(new LegendHeadingOptions
    {
        Text = "What is your address?",
        Level = 3,
        Size = "s",
    })"
/>
Blazor 
<NhsukLegend
    Heading="@(new LegendHeadingOptions
    {
        Text = "What is your address?",
        Level = 3,
        Size = "s",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "heading": {
    "text": "What is your address?",
    "level": 3,
    "size": "s"
  }
}) }}

With HTML

Matches upstream

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend html="What is your address?" heading-options="@(true)" size="l" />
Blazor 
<NhsukLegend Html="What is your address?" Heading="@(true)" Size="l" />
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "html": "What is your address?",
  "heading": true,
  "size": "l"
}) }}

With HTML via call block

Matches upstream

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend heading-options="@(true)" size="l">
    What is your address?
</nhsuk-legend>
Blazor 
<NhsukLegend Heading="@(true)" Size="l">
    What is your address?
</NhsukLegend>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{% call legend({
  "heading": true,
  "size": "l"
}) %}
  What is your address?
{% endcall %}

With HTML via call block, without heading

Matches upstream

Open on its own page (opens in new tab)

What is your address?
Razor Pages and MVC 
<nhsuk-legend size="l">
    What is your address?
</nhsuk-legend>
Blazor 
<NhsukLegend Size="l">
    What is your address?
</NhsukLegend>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{% call legend({
  "size": "l"
}) %}
  What is your address?
{% endcall %}

With id attribute

Matches upstream

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend id="custom-id" heading="What is your address?" size="l" />
Blazor 
<NhsukLegend Id="custom-id" Heading="@("What is your address?")" Size="l" />
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "id": "custom-id",
  "heading": "What is your address?",
  "size": "l"
}) }}

With id attribute on heading

Matches upstream

Open on its own page (opens in new tab)

What is your address?

Razor Pages and MVC 
<nhsuk-legend
    heading-options="@(new LegendHeadingOptions
    {
        Text = "What is your address?",
        Id = "custom-id",
    })"
    size="l"
/>
Blazor 
<NhsukLegend
    Heading="@(new LegendHeadingOptions
    {
        Text = "What is your address?",
        Id = "custom-id",
    })"
    Size="l"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "heading": {
    "text": "What is your address?",
    "id": "custom-id"
  },
  "size": "l"
}) }}

Without heading

Matches upstream

Open on its own page (opens in new tab)

What is your address?
Razor Pages and MVC 
<nhsuk-legend text="What is your address?" />
Blazor 
<NhsukLegend Text="What is your address?" />
Nunjucks (upstream) 
{% from "nhsuk/components/legend/macro.njk" import legend %}

{{ legend({
  "text": "What is your address?"
}) }}