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

Skip to main content
  1. GOV.UK Frontend
  2. All components
  3. 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"
}) }}
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"
}) }}
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"
}) }}
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"
}) }}
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"
}) }}
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"
}) }}
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
}) }}
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
}) }}
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
}) }}
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
}) }}
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
}) }}