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

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-ecc8e8">
      brooklyn everyday
    </a>
  </li>
  <li class="vi-taxonomy__item">
    <a class="vi-taxonomy__link" href="#taxonomy-630d0e">
      crucifix selvage
    </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-92b16c">
      thundercats farm-to-table
    </a>
  </li>
  <li class="vi-taxonomy__item">
    <a class="vi-taxonomy__link vi-taxonomy__link--inversed" href="#taxonomy-99a6ae">
      literally distillery
    </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

Added

  • PBS support
  • Initial draft