Tag examples

• # default

  Open this example in a new tab

  Alpha

  {
    "text": "Alpha"
  }

  
  {% from "govuk/components/tag/macro.njk" import govukTag %}
  
  {{ govukTag({
    "text": "Alpha"
  }) }}
          

• # grey

  Open this example in a new tab

  Grey

  {
    "text": "Grey",
    "classes": "govuk-tag--grey"
  }

  
  {% from "govuk/components/tag/macro.njk" import govukTag %}
  
  {{ govukTag({
    "text": "Grey",
    "classes": "govuk-tag--grey"
  }) }}
          

• # light blue

  Open this example in a new tab

  Light blue

  {
    "text": "Light blue",
    "classes": "govuk-tag--light-blue"
  }

  
  {% from "govuk/components/tag/macro.njk" import govukTag %}
  
  {{ govukTag({
    "text": "Light blue",
    "classes": "govuk-tag--light-blue"
  }) }}
          

• # turquoise

  Open this example in a new tab

  Turquoise

  {
    "text": "Turquoise",
    "classes": "govuk-tag--turquoise"
  }

  
  {% from "govuk/components/tag/macro.njk" import govukTag %}
  
  {{ govukTag({
    "text": "Turquoise",
    "classes": "govuk-tag--turquoise"
  }) }}
          

• # green

  Open this example in a new tab

  Green

  {
    "text": "Green",
    "classes": "govuk-tag--green"
  }

  
  {% from "govuk/components/tag/macro.njk" import govukTag %}
  
  {{ govukTag({
    "text": "Green",
    "classes": "govuk-tag--green"
  }) }}
          

• # purple

  Open this example in a new tab

  Purple

  {
    "text": "Purple",
    "classes": "govuk-tag--purple"
  }

  
  {% from "govuk/components/tag/macro.njk" import govukTag %}
  
  {{ govukTag({
    "text": "Purple",
    "classes": "govuk-tag--purple"
  }) }}
          

• # pink

  Open this example in a new tab

  Pink

  {
    "text": "Pink",
    "classes": "govuk-tag--pink"
  }

  
  {% from "govuk/components/tag/macro.njk" import govukTag %}
  
  {{ govukTag({
    "text": "Pink",
    "classes": "govuk-tag--pink"
  }) }}
          

• # red

  Open this example in a new tab

  Red

  {
    "text": "Red",
    "classes": "govuk-tag--red"
  }

  
  {% from "govuk/components/tag/macro.njk" import govukTag %}
  
  {{ govukTag({
    "text": "Red",
    "classes": "govuk-tag--red"
  }) }}
          

• # orange

  Open this example in a new tab

  Orange

  {
    "text": "Orange",
    "classes": "govuk-tag--orange"
  }

  
  {% from "govuk/components/tag/macro.njk" import govukTag %}
  
  {{ govukTag({
    "text": "Orange",
    "classes": "govuk-tag--orange"
  }) }}
          

• # yellow

  Open this example in a new tab

  Yellow

  {
    "text": "Yellow",
    "classes": "govuk-tag--yellow"
  }

  
  {% from "govuk/components/tag/macro.njk" import govukTag %}
  
  {{ govukTag({
    "text": "Yellow",
    "classes": "govuk-tag--yellow"
  }) }}
          

• # attributes

  Open this example in a new tab

  Tag with attributes

  {
    "text": "Tag with attributes",
    "attributes": {
      "data-test": "attribute",
      "id": "my-tag"
    }
  }

  
  {% from "govuk/components/tag/macro.njk" import govukTag %}
  
  {{ govukTag({
    "text": "Tag with attributes",
    "attributes": {
      "data-test": "attribute",
      "id": "my-tag"
    }
  }) }}
          

• # html as text

  Open this example in a new tab

  <span>Alpha</span>

  {
    "text": "<span>Alpha</span>"
  }

  
  {% from "govuk/components/tag/macro.njk" import govukTag %}
  
  {{ govukTag({
    "text": "<span>Alpha</span>"
  }) }}
          

• # html

  Open this example in a new tab

  Alpha

  {
    "html": "<span>Alpha</span>"
  }

  
  {% from "govuk/components/tag/macro.njk" import govukTag %}
  
  {{ govukTag({
    "html": "<span>Alpha</span>"
  }) }}