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