Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

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({
  text: "What is your address?",
  size: "l",
  isPageHeading: true
}) }}

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({
  text: "What is your address?",
  size: "s",
  isPageHeading: true
}) }}

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({
  text: "What is your address?",
  size: "m",
  isPageHeading: true
}) }}

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({
  text: "What is your address?",
  size: "l",
  isPageHeading: true
}) }}

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({
  text: "What is your address?",
  size: "xl",
  isPageHeading: true
}) }}

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({
  text: "What is your address?",
  size: "l",
  isPageHeading: true
}) }}

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({
  size: "l",
  isPageHeading: true
}) %}
What is your address?
{%- endcall %}

Legend without page heading

Open this example in a new tab: Legend without page 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?"
}) }}

Legend with size class

Open this example in a new tab: Legend with 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({
  text: "What is your address?",
  classes: "nhsuk-fieldset__legend--l",
  isPageHeading: true
}) }}

Legend with size class overriding size param

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

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?",
  classes: "nhsuk-fieldset__legend--l",
  size: "s",
  isPageHeading: true
}) }}