Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Product
Primitives & components: Teva Product

Taxonomy

v0.0.0

The Taxonomy renders links by default in the dominant brand color.

Use modifier --inversed on element with class .vi-taxonomy__link to change the color.

<ul aria-label="categories" class="vi-taxonomy">
  <li class="vi-taxonomy__item">
    <a class="vi-taxonomy__link" href="#taxonomy-bac2e5">
      locavore lomo
    </a>
  </li>
  <li class="vi-taxonomy__item">
    <a class="vi-taxonomy__link" href="#taxonomy-159471">
      flannel echo
    </a>
  </li>
</ul>
<ul aria-label="categories" class="vi-taxonomy">
  <li class="vi-taxonomy__item">
    <a class="vi-taxonomy__link vi-taxonomy__link--inversed" href="#taxonomy-a7c0ab">
      retro taxidermy
    </a>
  </li>
  <li class="vi-taxonomy__item">
    <a class="vi-taxonomy__link vi-taxonomy__link--inversed" href="#taxonomy-be186b">
      banjo etsy
    </a>
  </li>
</ul>

Stylesheets #

The following stylesheet is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • Long tag names should wrap.

Changed

  • A11y Add aria-label="categeries" to element ul.vi-taxonomy
  • Set minimum width and height of 24px for taxonomy elements for better accessibility

Added

  • PBS support
  • Initial draft