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

Badge

v0.0.0

Vision Badge. Use for legends, counters and labels.

Following size modifiers are available --sm and --xs.

When using it as a label use modifier --squish.

Exception: use --square to drop rounded corners.

without content (legend)

with content (counter)

1 3 89 100 9999 1 3 89 100 9999 1 3 89 100 9999

with content (label)

keffiyeh readymade keffiyeh readymade keffiyeh readymade

with content (square label)

cold-pressed pour-over cold-pressed pour-over cold-pressed pour-over

with content (multiline). This should not be here.

Vinyl listicle you probably haven't heard of them normcore. You probably haven't heard of them chillwave hella semiotics blue bottle. Banh mi cliche tacos celiac fingerstache. Crucifix you probably haven't heard of them brooklyn aesthetic trust fund celiac. Banjo normcore roof. 8-bit squid pour-over seitan viral health direct trade. Butcher mlkshk readymade. Mixtape keytar stumptown brooklyn slow-carb truffaut chia bespoke. Wes anderson vice microdosing dreamcatcher next level bicycle rights. Dreamcatcher wolf drinking cliche vice heirloom aesthetic retro.
Vinyl listicle you probably haven't heard of them normcore. You probably haven't heard of them chillwave hella semiotics blue bottle. Banh mi cliche tacos celiac fingerstache. Crucifix you probably haven't heard of them brooklyn aesthetic trust fund celiac. Banjo normcore roof. 8-bit squid pour-over seitan viral health direct trade. Butcher mlkshk readymade. Mixtape keytar stumptown brooklyn slow-carb truffaut chia bespoke. Wes anderson vice microdosing dreamcatcher next level bicycle rights. Dreamcatcher wolf drinking cliche vice heirloom aesthetic retro. 
<!-- Badge  -->
<span class="vi-badge"></span>
<!-- Badge (mods: --sm) -->
<span class="vi-badge vi-badge--sm"></span>
<!-- Badge (mods: --xs) -->
<span class="vi-badge vi-badge--xs"></span>
<!-- Badge  -->
<span class="vi-badge">1</span>
<!-- Badge  -->
<span class="vi-badge">3</span>
<!-- Badge  -->
<span class="vi-badge">89</span>
<!-- Badge  -->
<span class="vi-badge">100</span>
<!-- Badge  -->
<span class="vi-badge">9999</span>
<!-- Badge (mods: --sm) -->
<span class="vi-badge vi-badge--sm">1</span>
<!-- Badge (mods: --sm) -->
<span class="vi-badge vi-badge--sm">3</span>
<!-- Badge (mods: --sm) -->
<span class="vi-badge vi-badge--sm">89</span>
<!-- Badge (mods: --sm) -->
<span class="vi-badge vi-badge--sm">100</span>
<!-- Badge (mods: --sm) -->
<span class="vi-badge vi-badge--sm">9999</span>
<!-- Badge (mods: --xs) -->
<span class="vi-badge vi-badge--xs">1</span>
<!-- Badge (mods: --xs) -->
<span class="vi-badge vi-badge--xs">3</span>
<!-- Badge (mods: --xs) -->
<span class="vi-badge vi-badge--xs">89</span>
<!-- Badge (mods: --xs) -->
<span class="vi-badge vi-badge--xs">100</span>
<!-- Badge (mods: --xs) -->
<span class="vi-badge vi-badge--xs">9999</span>
<!-- Badge (mods: --squish) -->
<span class="vi-badge vi-badge--squish">keffiyeh readymade</span>
<!-- Badge (mods: --sm, --squish) -->
<span class="vi-badge vi-badge--sm vi-badge--squish">keffiyeh readymade</span>
<!-- Badge (mods: --xs, --squish) -->
<span class="vi-badge vi-badge--xs vi-badge--squish">keffiyeh readymade</span>
<!-- Badge (mods: --squish, --square) -->
<span class="vi-badge vi-badge--squish vi-badge--square">cold-pressed pour-over</span>
<!-- Badge (mods: --sm, --squish, --square) -->
<span class="vi-badge vi-badge--sm vi-badge--squish vi-badge--square">cold-pressed pour-over</span>
<!-- Badge (mods: --xs, --square) -->
<span class="vi-badge vi-badge--xs vi-badge--square">cold-pressed pour-over</span>
<!-- Badge (mods: --squish, --square, --multiline) -->
<span class="vi-badge vi-badge--squish vi-badge--square vi-badge--multiline">Vinyl listicle you probably haven't heard of them normcore. You probably haven't heard of them chillwave hella semiotics blue bottle. Banh mi cliche tacos celiac fingerstache. Crucifix you probably haven't heard of them brooklyn aesthetic trust fund celiac. Banjo normcore roof. 8-bit squid pour-over seitan viral health direct trade. Butcher mlkshk readymade. Mixtape keytar stumptown brooklyn slow-carb truffaut chia bespoke. Wes anderson vice microdosing dreamcatcher next level bicycle rights. Dreamcatcher wolf drinking cliche vice heirloom aesthetic retro.</span>
<!-- Badge (mods: --sm, --squish, --square, --multiline) -->
<span class="vi-badge vi-badge--sm vi-badge--squish vi-badge--square vi-badge--multiline">Vinyl listicle you probably haven't heard of them normcore. You probably haven't heard of them chillwave hella semiotics blue bottle. Banh mi cliche tacos celiac fingerstache. Crucifix you probably haven't heard of them brooklyn aesthetic trust fund celiac. Banjo normcore roof. 8-bit squid pour-over seitan viral health direct trade. Butcher mlkshk readymade. Mixtape keytar stumptown brooklyn slow-carb truffaut chia bespoke. Wes anderson vice microdosing dreamcatcher next level bicycle rights. Dreamcatcher wolf drinking cliche vice heirloom aesthetic retro.</span>

Colors #

Use Color Utilities to change background or text color.

.bg-dominant .bg-accent-1 .bg-accent-2 .bg-neutral-70
.bg-white.text-neutral-50 
<!-- Badge (mods: --squish) -->
<span class="bg-dominant vi-badge vi-badge--squish">.bg-dominant</span>
<!-- Badge (mods: --squish) -->
<span class="bg-accent-1 vi-badge vi-badge--squish">.bg-accent-1</span>
<!-- Badge (mods: --squish) -->
<span class="bg-accent-2 vi-badge vi-badge--squish">.bg-accent-2</span>
<!-- Badge (mods: --squish) -->
<span class="bg-neutral-70 vi-badge vi-badge--squish">.bg-neutral-70</span>
<!-- Badge (mods: --squish) -->
<span class="bg-white text-neutral-50 vi-badge vi-badge--squish">.bg-white.text-neutral-50</span>

Specials

Following are special purpose labels.

Flag modifier #

Use the flag modifier to create a flag-like appearance, used to indicate something new.

  • --flag
  • --flag-inversed
Nouveau
Nouveau 
<!-- Badge (mods: --flag) -->
<span class="vi-badge vi-badge--flag">Nouveau</span>
<!-- Badge (mods: --flag-inversed) -->
<span class="vi-badge vi-badge--flag-inversed">Nouveau</span>

Promo Modifiers #

Promo banners are a combination of the modifier --promo (size and shape) and one of the color modifiers:

  • --promo-1
  • --promo-2
  • --promo-3
  • --promo-4
  • --promo-5
  • --promo-6
  • --promo-7
  • --promo-8
--promo-1 --promo-2 --promo-3 --promo-4 --promo-5 --promo-6 --promo-7 --promo-8 
<!-- Badge (mods: --promo, --promo-1) -->
<span class="vi-badge vi-badge--promo vi-badge--promo-1">--promo-1</span>
<!-- Badge (mods: --promo, --promo-2) -->
<span class="vi-badge vi-badge--promo vi-badge--promo-2">--promo-2</span>
<!-- Badge (mods: --promo, --promo-3) -->
<span class="vi-badge vi-badge--promo vi-badge--promo-3">--promo-3</span>
<!-- Badge (mods: --promo, --promo-4) -->
<span class="vi-badge vi-badge--promo vi-badge--promo-4">--promo-4</span>
<!-- Badge (mods: --promo, --promo-5) -->
<span class="vi-badge vi-badge--promo vi-badge--promo-5">--promo-5</span>
<!-- Badge (mods: --promo, --promo-6) -->
<span class="vi-badge vi-badge--promo vi-badge--promo-6">--promo-6</span>
<!-- Badge (mods: --promo, --promo-7) -->
<span class="vi-badge vi-badge--promo vi-badge--promo-7">--promo-7</span>
<!-- Badge (mods: --promo, --promo-8) -->
<span class="vi-badge vi-badge--promo vi-badge--promo-8">--promo-8</span>

Stylesheets #

The following stylesheet is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Changed

  • Print: css adjustments

Added

  • 10 May 2023 - Added --promo-8 modifier.
  • 11 Apr 2023 - Added --promo modifiers.
  • 07 Nov 2022 - Added --multiline modifier.
  • 02 Sep 2022 - Added --square modifier.
  • 13 June 2022 - Added --xs modifier.
  • PBS support
  • Special purpose --flag and --flag-inversed modifiers.
  • Initial draft