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.
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 Draft
Draft Draft
Draft Draft
Draft Draft
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>