Tag

Tag 📸

Open this example in a new tab

Code

Markup

<strong class="govuk-tag">
  Alpha
</strong>

Macro

{% from "govuk/components/tag/macro.njk" import govukTag %}

{{ govukTag({
  text: "Alpha"
}) }}

Tag grey

Open this example in a new tab

Code

Markup

<strong class="govuk-tag govuk-tag--grey">
  Grey
</strong>

Macro

{% from "govuk/components/tag/macro.njk" import govukTag %}

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

Tag turquoise

Open this example in a new tab

Code

Markup

<strong class="govuk-tag govuk-tag--teal">
  Teal
</strong>

Macro

{% from "govuk/components/tag/macro.njk" import govukTag %}

{{ govukTag({
  text: "Teal",
  classes: "govuk-tag--teal"
}) }}

Tag green

Open this example in a new tab

Code

Markup

<strong class="govuk-tag govuk-tag--green">
  Green
</strong>

Macro

{% from "govuk/components/tag/macro.njk" import govukTag %}

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

Tag purple

Open this example in a new tab

Code

Markup

<strong class="govuk-tag govuk-tag--purple">
  Purple
</strong>

Macro

{% from "govuk/components/tag/macro.njk" import govukTag %}

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

Tag pink

Open this example in a new tab

Code

Markup

<strong class="govuk-tag govuk-tag--magenta">
  Magenta
</strong>

Macro

{% from "govuk/components/tag/macro.njk" import govukTag %}

{{ govukTag({
  text: "Magenta",
  classes: "govuk-tag--magenta"
}) }}

Tag red

Open this example in a new tab

Code

Markup

<strong class="govuk-tag govuk-tag--red">
  Red
</strong>

Macro

{% from "govuk/components/tag/macro.njk" import govukTag %}

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

Tag orange

Open this example in a new tab

Code

Markup

<strong class="govuk-tag govuk-tag--orange">
  Orange
</strong>

Macro

{% from "govuk/components/tag/macro.njk" import govukTag %}

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

Tag yellow

Open this example in a new tab

Code

Markup

<strong class="govuk-tag govuk-tag--yellow">
  Yellow
</strong>

Macro

{% from "govuk/components/tag/macro.njk" import govukTag %}

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