Skip to content

Develop

A Label is a non-interactive element, so use a non-interactive tag such as <span>. The icon is optional and decorative — mark it aria-hidden="true".

<span class="tng-label">
  <i
    class="tng-icon icon-hybrid-electric-car-hev"
    aria-hidden="true"
  ></i>
  <span>Hybrid</span>
</span>
Hybrid

Variants

Section titled “Variants”

Colours

Section titled “Colours”

The default colour is neutral. Use is-green, is-blue, or is-red to signal a category or state. Always keep the text — never rely on colour alone.

<span class="tng-label">
  <i
    class="tng-icon icon-hybrid-electric-car-hev"
    aria-hidden="true"
  ></i>
  <span>Neutral</span>
</span>
<span class="tng-label is-green">
  <i class="tng-icon icon-self-charging" aria-hidden="true"></i>
  <span>Green</span>
</span>
<span class="tng-label is-blue">
  <i
    class="tng-icon icon-plug-in-hybrid-car-phev"
    aria-hidden="true"
  ></i>
  <span>Blue</span>
</span>
<span class="tng-label is-red">
  <i
    class="tng-icon icon-battery-electric-car-bev"
    aria-hidden="true"
  ></i>
  <span>Red</span>
</span>
Neutral Green Blue Red

Uppercase

Section titled “Uppercase”

Add is-uppercase to render the copy in uppercase.

<span class="tng-label is-uppercase">
  <i class="tng-icon icon-plug-droplet" aria-hidden="true"></i>
  <span>Plug-in</span>
</span>
Plug-in

Without icon

Section titled “Without icon”

Drop the icon when space is tight or the text alone is clear.

<span class="tng-label">Electric</span>
Electric

Sizes

Section titled “Sizes”

The default size is sm. Add is-lg for the larger size.

<span class="tng-label is-sm">
  <i class="tng-icon icon-plug-droplet" aria-hidden="true"></i>
  <span>Small</span>
</span>
<span class="tng-label is-lg">
  <i class="tng-icon icon-plug-droplet" aria-hidden="true"></i>
  <span>Large</span>
</span>
Small Large