Skip to main content

Label examples

  • # default

    Open this example in a new tab: button 
    {
  "text": "National Insurance number"
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

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

  • # with bold text

    Open this example in a new tab: button 
    {
  "classes": "govuk-label--s",
  "text": "National Insurance number"
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

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

  • # styled as xl text

    Open this example in a new tab: button 
    {
  "text": "National Insurance number",
  "classes": "govuk-label--xl"
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

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

  • # styled as large text

    Open this example in a new tab: button 
    {
  "text": "National Insurance number",
  "classes": "govuk-label--l"
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

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

  • # styled as medium text

    Open this example in a new tab: button 
    {
  "text": "National Insurance number",
  "classes": "govuk-label--m"
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

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

  • # styled as small text

    Open this example in a new tab: button 
    {
  "text": "National Insurance number",
  "classes": "govuk-label--s"
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

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

  • # as page heading xl

    Open this example in a new tab: button 

    {
  "text": "National Insurance number",
  "classes": "govuk-label--xl",
  "isPageHeading": true
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

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

  • # as page heading l

    Open this example in a new tab: button 

    {
  "text": "National Insurance number",
  "classes": "govuk-label--l",
  "isPageHeading": true
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

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

  • # as page heading m

    Open this example in a new tab: button 

    {
  "text": "National Insurance number",
  "classes": "govuk-label--m",
  "isPageHeading": true
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

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

  • # as page heading s

    Open this example in a new tab: button 

    {
  "text": "National Insurance number",
  "classes": "govuk-label--s",
  "isPageHeading": true
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

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

  • # as page heading without class

    Open this example in a new tab: button 

    {
  "text": "National Insurance number",
  "isPageHeading": true
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

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

  • # empty

    Open this example in a new tab: button 
    {}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({}) }}

  • # classes

    Open this example in a new tab: button 
    {
  "text": "National Insurance number",
  "classes": "extra-class one-more-class"
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  "text": "National Insurance number",
  "classes": "extra-class one-more-class"
}) }}

  • # html as text

    Open this example in a new tab: button 
    {
  "text": "National Insurance number, <em>NINO</em>"
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  "text": "National Insurance number, <em>NINO</em>"
}) }}

  • # html

    Open this example in a new tab: button 
    {
  "html": "National Insurance number <em>NINO</em>"
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  "html": "National Insurance number <em>NINO</em>"
}) }}

  • # for

    Open this example in a new tab: button 
    {
  "for": "test-target-element",
  "text": "National Insurance number"
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  "for": "test-target-element",
  "text": "National Insurance number"
}) }}

  • # attributes

    Open this example in a new tab: button 
    {
  "text": "National Insurance number",
  "attributes": {
    "first-attribute": "foo",
    "second-attribute": "bar"
  }
}
    
{% from "govuk/components/label/macro.njk" import govukLabel %}

{{ govukLabel({
  "text": "National Insurance number",
  "attributes": {
    "first-attribute": "foo",
    "second-attribute": "bar"
  }
}) }}