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 blue

Open this example in a new tab

Code

Markup

<strong class="govuk-tag govuk-tag--blue">
  Blue
</strong>

Macro

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

{{ govukTag({
  text: "Blue",
  classes: "govuk-tag--blue"
}) }}

Tag light blue

Open this example in a new tab

Code

Markup

<strong class="govuk-tag govuk-tag--light-blue">
  Light blue
</strong>

Macro

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

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

Tag turquoise

Open this example in a new tab

Code

Markup

<strong class="govuk-tag govuk-tag--turquoise">
  Turquoise
</strong>

Macro

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

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

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--pink">
  Pink
</strong>

Macro

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

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

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