Home
Components
Tags

Tags

Use tags to categorize, label, or highlight specific information. Using .pv-tag will default to the .pv-tag-tertiary style for compatibility with v1 tags. Icons are optional.

Example
Primary, secondary and tertiary tags.

HTML

<button class="pv-tag-primary">
  <svg aria-hidden="true" class="pv-icon-12">
    <title>user-circle</title>
    <use xlink:href="#user-circle"></use>
  </svg>
  <span>Tag</span>
  <svg aria-hidden="true" class="pv-icon-12">
    <title>close</title>
    <use xlink:href="#close"></use>
  </svg>
</button>
<button class="pv-tag-secondary">
  <svg aria-hidden="true" class="pv-icon-12">
    <title>user-circle</title>
    <use xlink:href="#user-circle"></use>
  </svg>
  <span>Tag</span>
  <svg aria-hidden="true" class="pv-icon-12">
    <title>close</title>
    <use xlink:href="#close"></use>
  </svg>
</button>
<button class="pv-tag-tertiary">
  <svg aria-hidden="true" class="pv-icon-12">
    <title>user-circle</title>
    <use xlink:href="#user-circle"></use>
  </svg>
  <span>Tag</span>
  <svg aria-hidden="true" class="pv-icon-12">
    <title>close</title>
    <use xlink:href="#close"></use>
  </svg>
</button>

Rounded Tags

Use the attribute data-style="rounded" to round the corners of a tag.

Example
A tag with rounded corners.

HTML

<button class="pv-tag-primary" data-style="rounded">
  <svg aria-hidden="true" class="pv-icon-12">
    <title>user-circle</title>
    <use xlink:href="#user-circle"></use>
  </svg>
  <span>Tag</span>
  <svg aria-hidden="true" class="pv-icon-12">
    <title>close</title>
    <use xlink:href="#close"></use>
  </svg>
</button>

Interactive Tags

Apply the tag class to buttons to add hover and active states. Tags can include an icon on the left or right of the text.

Example
An interactive tag with icons.

HTML

<button class="pv-tag">
  <svg aria-hidden="true" class="pv-icon-12">
    <title>user-circle</title>
    <use xlink:href="#user-circle"></use>
  </svg>
  <span>Tag</span>
  <svg aria-hidden="true" class="pv-icon-12">
    <title>close</title>
    <use xlink:href="#close"></use>
  </svg>
</button>

Strong Tags

Use .pv-tag on a strong element to increase the font weight and set the text to all caps.

Example
Strong tags used as release badges.

Alpha Beta

HTML

<strong class="pv-tag-yellow pv-tag-small">Alpha</strong>
<strong class="pv-tag-purple pv-tag-small">Beta</strong>

Sizes

Use an additional size utility to make a tag larger or smaller than the default medium size. Small tags will transform the text to uppercase.

Example
Tags in small, medium and large sizes.

Small Medium Large

HTML

<p class="pv-flex">
  <span class="pv-tag-primary pv-tag-sm">Small</span>
  <span class="pv-tag-primary">Medium</span>
  <span class="pv-tag-primary pv-tag-lg">Large</span>
</p>
<p class="pv-flex">
  <span class="pv-tag-secondary pv-tag-sm">Small</span>
  <span class="pv-tag-secondary">Medium</span>
  <span class="pv-tag-secondary pv-tag-lg">Large</span>
</p>
<p class="pv-flex">
  <span class="pv-tag-tertiary pv-tag-sm">Small</span>
  <span class="pv-tag-tertiary">Medium</span>
  <span class="pv-tag-tertiary pv-tag-lg">Large</span>
</p>
<p class="pv-flex">
  <span class="pv-tag-tertiary pv-tag-sm">
    <span class="pv-company-xs"><img src="/assets/images/aetna.png" alt=""></span>
    <span>Small</span>
  </span>
  <span class="pv-tag-tertiary">
    <span class="pv-company-xs"><img src="/assets/images/aetna.png" alt=""></span>
    <span>Medium</span>
  </span>
  <span class="pv-tag-tertiary pv-tag-lg">
    <span class="pv-company-sm"><img src="/assets/images/aetna.png" alt=""></span>
    <span>Large</span>
  </span>
</p>

Colors

Add a color modifier to change the color of a tag. You can also apply -inverse to give tags white text on a colored background.

Example
Tags in default, red and green colors, and their inverse.

Draft Draft

Draft

HTML

<span class="pv-tag">Draft</span>
<span class="pv-tag-inverse">Draft</span>
<span class="pv-tag-red">Draft</span>
<span class="pv-tag-red-inverse">Draft</span>
<span class="pv-tag-yellow">Draft</span>
<span class="pv-tag-yellow-inverse">Draft</span>
<span class="pv-tag-green">Draft</span>
<span class="pv-tag-green-inverse">Draft</span>
<span class="pv-tag-orange">Draft</span>
<span class="pv-tag-orange-inverse">Draft</span>
<span class="pv-tag-turquoise">Draft</span>
<span class="pv-tag-turquoise-inverse">Draft</span>

Pills

Example
A pill.

AA001

HTML

<p class="pv-pill">AA001</p>

Highlight

Example
Default, Category and Tag Highlights

Project Clarity Supported

Consultative and preventative care

Common

HTML

<p class="pv-highlight">Project Clarity Supported</p>
<p class="pv-highlight-category">Consultative and preventative care</p>
<p class="pv-highlight-tag">Common</p>