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

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
}) }}