This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Feature flags

Feature flag control

This is an experimental feature for turning the 'rebrand' feature flag on and off only.

Show all flag states

Skip to main content

Label

Label

Code

Markup

<label class="govuk-label">
  National Insurance number
</label>

Macro

{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  text: "National Insurance number"
}) }}

Label with bold text

Code

Markup

<label class="govuk-label govuk-label--s">
  National Insurance number
</label>

Macro

{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  classes: "govuk-label--s",
  text: "National Insurance number"
}) }}

Label styled as xl text

Code

Markup

<label class="govuk-label govuk-label--xl">
  National Insurance number
</label>

Macro

{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  text: "National Insurance number",
  classes: "govuk-label--xl"
}) }}

Label styled as large text

Code

Markup

<label class="govuk-label govuk-label--l">
  National Insurance number
</label>

Macro

{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  text: "National Insurance number",
  classes: "govuk-label--l"
}) }}

Label styled as medium text

Code

Markup

<label class="govuk-label govuk-label--m">
  National Insurance number
</label>

Macro

{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  text: "National Insurance number",
  classes: "govuk-label--m"
}) }}

Label styled as small text

Code

Markup

<label class="govuk-label govuk-label--s">
  National Insurance number
</label>

Macro

{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  text: "National Insurance number",
  classes: "govuk-label--s"
}) }}

Label as page heading xl

Code

Markup

<h1 class="govuk-label-wrapper">
  <label class="govuk-label govuk-label--xl">
    National Insurance number
  </label>
</h1>

Macro

{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  text: "National Insurance number",
  classes: "govuk-label--xl",
  isPageHeading: true
}) }}

Label as page heading l

Code

Markup

<h1 class="govuk-label-wrapper">
  <label class="govuk-label govuk-label--l">
    National Insurance number
  </label>
</h1>

Macro

{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  text: "National Insurance number",
  classes: "govuk-label--l",
  isPageHeading: true
}) }}

Label as page heading m

Code

Markup

<h1 class="govuk-label-wrapper">
  <label class="govuk-label govuk-label--m">
    National Insurance number
  </label>
</h1>

Macro

{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  text: "National Insurance number",
  classes: "govuk-label--m",
  isPageHeading: true
}) }}

Label as page heading s

Code

Markup

<h1 class="govuk-label-wrapper">
  <label class="govuk-label govuk-label--s">
    National Insurance number
  </label>
</h1>

Macro

{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  text: "National Insurance number",
  classes: "govuk-label--s",
  isPageHeading: true
}) }}

Label as page heading without class

Code

Markup

<h1 class="govuk-label-wrapper">
  <label class="govuk-label">
    National Insurance number
  </label>
</h1>

Macro

{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  text: "National Insurance number",
  isPageHeading: true
}) }}