This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Feature flags

Feature flag control

This is an experimental feature for turning the 'rebrand' feature flag on and off only.

Show all flag states

Skip to main content

Tag

Tag

Open this example in a new tab: Tagoff

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: Tag greyoff

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: Tag blueoff

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: Tag light blueoff

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: Tag turquoiseoff

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: Tag greenoff

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: Tag purpleoff

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: Tag pinkoff

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: Tag redoff

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: Tag orangeoff

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: Tag yellowoff

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