Tag

These examples are used for automated tests and may not follow service manual best practice.

Tag default

Open this example in a new tab: Tag default

Active

Code

Markup

<strong class="nhsuk-tag">
  Active
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Active"
}) }}

Tag white default

Open this example in a new tab: Tag white default

In progress

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--white">
  In progress
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "In progress",
  colour: "white"
}) }}

Tag grey default

Open this example in a new tab: Tag grey default

Inactive

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--grey">
  Inactive
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Inactive",
  colour: "grey"
}) }}

Tag green default

Open this example in a new tab: Tag green default

New

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--green">
  New
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "New",
  colour: "green"
}) }}

Tag aqua-green default

Open this example in a new tab: Tag aqua-green default

Active

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--aqua-green">
  Active
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Active",
  colour: "aqua-green"
}) }}

Tag blue default

Open this example in a new tab: Tag blue default

Pending

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--blue">
  Pending
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Pending",
  colour: "blue"
}) }}

Tag purple default

Open this example in a new tab: Tag purple default

Received

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--purple">
  Received
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Received",
  colour: "purple"
}) }}

Tag pink default

Open this example in a new tab: Tag pink default

Sent

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--pink">
  Sent
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Sent",
  colour: "pink"
}) }}

Tag red default

Open this example in a new tab: Tag red default

Rejected

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--red">
  Rejected
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Rejected",
  colour: "red"
}) }}

Tag orange default

Open this example in a new tab: Tag orange default

Declined

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--orange">
  Declined
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Declined",
  colour: "orange"
}) }}

Tag yellow default

Open this example in a new tab: Tag yellow default

Delayed

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--yellow">
  Delayed
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Delayed",
  colour: "yellow"
}) }}

Tag colour class

Open this example in a new tab: Tag colour class

Green

Code

Markup

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

Macro

{% from "tag/macro.njk" import tag -%}

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

Tag colour class overriding colour param

Open this example in a new tab: Tag colour class overriding colour param

Not green

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--red">
  Not green
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Not green",
  colour: "green",
  classes: "nhsuk-tag--red"
}) }}

Tag without border

Open this example in a new tab: Tag without border

Active

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--no-border">
  Active
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Active"
}) }}

Tag white without border

Open this example in a new tab: Tag white without border

In progress

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--white nhsuk-tag--no-border">
  In progress
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "In progress",
  colour: "white"
}) }}

Tag grey without border

Open this example in a new tab: Tag grey without border

Inactive

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--grey nhsuk-tag--no-border">
  Inactive
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Inactive",
  colour: "grey"
}) }}

Tag green without border

Open this example in a new tab: Tag green without border

New

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--green nhsuk-tag--no-border">
  New
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "New",
  colour: "green"
}) }}

Tag aqua-green without border

Open this example in a new tab: Tag aqua-green without border

Active

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--aqua-green nhsuk-tag--no-border">
  Active
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Active",
  colour: "aqua-green"
}) }}

Tag blue without border

Open this example in a new tab: Tag blue without border

Pending

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--blue nhsuk-tag--no-border">
  Pending
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Pending",
  colour: "blue"
}) }}

Tag purple without border

Open this example in a new tab: Tag purple without border

Received

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--purple nhsuk-tag--no-border">
  Received
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Received",
  colour: "purple"
}) }}

Tag pink without border

Open this example in a new tab: Tag pink without border

Sent

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--pink nhsuk-tag--no-border">
  Sent
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Sent",
  colour: "pink"
}) }}

Tag red without border

Open this example in a new tab: Tag red without border

Rejected

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--red nhsuk-tag--no-border">
  Rejected
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Rejected",
  colour: "red"
}) }}

Tag orange without border

Open this example in a new tab: Tag orange without border

Declined

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--orange nhsuk-tag--no-border">
  Declined
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Declined",
  colour: "orange"
}) }}

Tag yellow without border

Open this example in a new tab: Tag yellow without border

Delayed

Code

Markup

<strong class="nhsuk-tag nhsuk-tag--yellow nhsuk-tag--no-border">
  Delayed
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Delayed",
  colour: "yellow"
}) }}