Skip to main content

Internal review app NHS.UK frontend

Use design system guidance and examples to build consistent, accessible NHS services for the public and staff.

Deployed automatically from main branch (opens in new tab).

Legend

These examples are used for automated tests and may not follow service manual best practice.

Legend default

Open this example in a new tab: Legend default

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
  <h1 class="nhsuk-fieldset__heading">
    What is your address?
  </h1>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend size class

Open this example in a new tab: Legend size class

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
  <h1 class="nhsuk-fieldset__heading">
    What is your address?
  </h1>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend size class overriding size option

Open this example in a new tab: Legend size class overriding size option

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
  <h1 class="nhsuk-fieldset__heading">
    What is your address?
  </h1>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with size S text

Open this example in a new tab: Legend with size S text

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">
  <h1 class="nhsuk-fieldset__heading">
    What is your address?
  </h1>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with size M text

Open this example in a new tab: Legend with size M text

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
  <h1 class="nhsuk-fieldset__heading">
    What is your address?
  </h1>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with size L text

Open this example in a new tab: Legend with size L text

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
  <h1 class="nhsuk-fieldset__heading">
    What is your address?
  </h1>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with size XL text

Open this example in a new tab: Legend with size XL text

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--xl">
  <h1 class="nhsuk-fieldset__heading">
    What is your address?
  </h1>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with size S text and caption

Open this example in a new tab: Legend with size S text and caption

About you What is your home address?
Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">
  <span class="nhsuk-caption">
    About you
  </span>
  What is your home address?
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with size M text and caption

Open this example in a new tab: Legend with size M text and caption

About you What is your home address?
Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
  <span class="nhsuk-caption-m">
    About you
  </span>
  What is your home address?
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with size L text and caption

Open this example in a new tab: Legend with size L text and caption

About you What is your home address?
Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
  <span class="nhsuk-caption-l">
    About you
  </span>
  What is your home address?
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with size XL text and caption

Open this example in a new tab: Legend with size XL text and caption

About you What is your home address?
Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--xl">
  <span class="nhsuk-caption-xl">
    About you
  </span>
  What is your home address?
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with size S text and caption "after" as a paragraph

Open this example in a new tab: Legend with size S text and caption "after" as a paragraph

What is your home address?

About you

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">
  What is your home address?
</legend>
<p class="nhsuk-caption nhsuk-caption--bottom">
  About you
</p>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with size M text and caption "after" as a paragraph

Open this example in a new tab: Legend with size M text and caption "after" as a paragraph

What is your home address?

About you

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
  What is your home address?
</legend>
<p class="nhsuk-caption-m nhsuk-caption--bottom">
  About you
</p>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with size L text and caption "after" as a paragraph

Open this example in a new tab: Legend with size L text and caption "after" as a paragraph

What is your home address?

About you

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
  What is your home address?
</legend>
<p class="nhsuk-caption-l nhsuk-caption--bottom">
  About you
</p>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with size XL text and caption "after" as a paragraph

Open this example in a new tab: Legend with size XL text and caption "after" as a paragraph

What is your home address?

About you

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--xl">
  What is your home address?
</legend>
<p class="nhsuk-caption-xl nhsuk-caption--bottom">
  About you
</p>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with deprecated page heading

Open this example in a new tab: Legend with deprecated page heading

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
  <h1 class="nhsuk-fieldset__heading">
    What is your address?
  </h1>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with deprecated page heading overriding heading

Open this example in a new tab: Legend with deprecated page heading overriding heading

What is your address?
Code

Markup

<legend class="nhsuk-fieldset__legend">
  What is your address?
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with heading level 1

Open this example in a new tab: Legend with heading level 1

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
  <h1 class="nhsuk-fieldset__heading">
    What is your address?
  </h1>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with heading level 2

Open this example in a new tab: Legend with heading level 2

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
  <h2 class="nhsuk-fieldset__heading">
    What is your address?
  </h2>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with heading level 3

Open this example in a new tab: Legend with heading level 3

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">
  <h3 class="nhsuk-fieldset__heading">
    What is your address?
  </h3>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with heading options only

Open this example in a new tab: Legend with heading options only

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">
  <h3 class="nhsuk-fieldset__heading">
    What is your address?
  </h3>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with HTML

Open this example in a new tab: Legend with HTML

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
  <h1 class="nhsuk-fieldset__heading">
    What is your address?
  </h1>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with HTML via call block

Open this example in a new tab: Legend with HTML via call block

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
  <h1 class="nhsuk-fieldset__heading">
    What is your address?
  </h1>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with HTML via call block, without heading

Open this example in a new tab: Legend with HTML via call block, without heading

What is your address?
Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
  What is your address?
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with id attribute

Open this example in a new tab: Legend with id attribute

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l" id="custom-id">
  <h1 class="nhsuk-fieldset__heading">
    What is your address?
  </h1>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend with id attribute on heading

Open this example in a new tab: Legend with id attribute on heading

What is your address?

Code

Markup

<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
  <h1 class="nhsuk-fieldset__heading" id="custom-id">
    What is your address?
  </h1>
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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

Legend without heading

Open this example in a new tab: Legend without heading

What is your address?
Code

Markup

<legend class="nhsuk-fieldset__legend">
  What is your address?
</legend>

Macro

{% from "legend/macro.njk" import legend -%}

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