Home
Components
Tags

Tags

Use tags to highlight a small bit of inline text.

Example
A tag used as a counter and as a key.

Hold shift to select consecutive orgs

HTML

<span class="pv-tag">23</span>
<p class="pv-text-subdued pv-text-body-sm">Hold <span class="pv-tag">shift</span> to select consecutive orgs</p>

Rounded Tags

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

Example
A tag with rounded corners.

HTML

<span class="pv-tag" data-style="rounded">23</span>

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

<span class="pv-tag pv-tag-sm">Small</span>
<span class="pv-tag">Medium</span>
<span class="pv-tag pv-tag-lg">Large</span>

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>