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.

Label

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

Label default

Open this example in a new tab: Label default

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--l">
    What is your full name?
  </label>
</h1>

Macro

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

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

Label size class

Open this example in a new tab: Label size class

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--l">
    What is your full name?
  </label>
</h1>

Macro

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

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

Label size class overriding size param

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

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--l">
    What is your full name?
  </label>
</h1>

Macro

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

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

Label with size S text

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

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--s">
    What is your full name?
  </label>
</h1>

Macro

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

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

Label with size M text

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

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--m">
    What is your full name?
  </label>
</h1>

Macro

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

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

Label with size L text

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

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--l">
    What is your full name?
  </label>
</h1>

Macro

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

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

Label with size XL text

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

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--xl">
    What is your full name?
  </label>
</h1>

Macro

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

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

Label without page heading

Open this example in a new tab: Label without page heading

Code

Markup

<label class="nhsuk-label">
  What is your full name?
</label>

Macro

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

{{ label({
  text: "What is your full name?"
}) }}