Label

Label

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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

Open this example in a new tab

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