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

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)

heirloom synth heirloom synth heirloom synth

with content (square label)

church-key lomo church-key lomo church-key lomo

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

90's umami truffaut distillery migas flannel. Shabby chic thundercats paleo scenester crucifix cornhole pabst. Neutra pork belly poutine fingerstache sustainable polaroid butcher. Migas messenger bag dreamcatcher try-hard street park. Craft beer typewriter twee vegan wayfarers health kinfolk chicharrones. Venmo ethical you probably haven't heard of them blog wes anderson ugh biodiesel squid. Synth chartreuse messenger bag irony. Salvia wayfarers before they sold out chia deep v tofu freegan cold-pressed.
90's umami truffaut distillery migas flannel. Shabby chic thundercats paleo scenester crucifix cornhole pabst. Neutra pork belly poutine fingerstache sustainable polaroid butcher. Migas messenger bag dreamcatcher try-hard street park. Craft beer typewriter twee vegan wayfarers health kinfolk chicharrones. Venmo ethical you probably haven't heard of them blog wes anderson ugh biodiesel squid. Synth chartreuse messenger bag irony. Salvia wayfarers before they sold out chia deep v tofu freegan cold-pressed. 
<!-- 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">heirloom synth</span>
<!-- Badge (mods: --sm, --squish) -->
<span class="vi-badge vi-badge--sm vi-badge--squish">heirloom synth</span>
<!-- Badge (mods: --xs, --squish) -->
<span class="vi-badge vi-badge--xs vi-badge--squish">heirloom synth</span>
<!-- Badge (mods: --squish, --square) -->
<span class="vi-badge vi-badge--squish vi-badge--square">church-key lomo</span>
<!-- Badge (mods: --sm, --squish, --square) -->
<span class="vi-badge vi-badge--sm vi-badge--squish vi-badge--square">church-key lomo</span>
<!-- Badge (mods: --xs, --square) -->
<span class="vi-badge vi-badge--xs vi-badge--square">church-key lomo</span>
<!-- Badge (mods: --squish, --square, --multiline) -->
<span class="vi-badge vi-badge--squish vi-badge--square vi-badge--multiline">90's umami truffaut distillery migas flannel. Shabby chic thundercats paleo scenester crucifix cornhole pabst. Neutra pork belly poutine fingerstache sustainable polaroid butcher. Migas messenger bag dreamcatcher try-hard street park. Craft beer typewriter twee vegan wayfarers health kinfolk chicharrones. Venmo ethical you probably haven't heard of them blog wes anderson ugh biodiesel squid. Synth chartreuse messenger bag irony. Salvia wayfarers before they sold out chia deep v tofu freegan cold-pressed.</span>
<!-- Badge (mods: --sm, --squish, --square, --multiline) -->
<span class="vi-badge vi-badge--sm vi-badge--squish vi-badge--square vi-badge--multiline">90's umami truffaut distillery migas flannel. Shabby chic thundercats paleo scenester crucifix cornhole pabst. Neutra pork belly poutine fingerstache sustainable polaroid butcher. Migas messenger bag dreamcatcher try-hard street park. Craft beer typewriter twee vegan wayfarers health kinfolk chicharrones. Venmo ethical you probably haven't heard of them blog wes anderson ugh biodiesel squid. Synth chartreuse messenger bag irony. Salvia wayfarers before they sold out chia deep v tofu freegan cold-pressed.</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>

Pipeline Modifiers #

For Teva Global following modifiers are available to use on the pipeline page as legend:

  • --pipeline-migraine
  • --pipeline-neurology
  • --pipeline-respiratory
  • --pipeline-biosimilars
  • --pipeline-other
--pipeline-migraine --pipeline-neurology --pipeline-respiratory --pipeline-biosimilars --pipeline-other 
<!-- Badge (mods: --sm, --squish, --pipeline-migraine) -->
<span class="vi-badge vi-badge--sm vi-badge--squish vi-badge--pipeline-migraine">--pipeline-migraine</span>
<!-- Badge (mods: --sm, --squish, --pipeline-neurology) -->
<span class="vi-badge vi-badge--sm vi-badge--squish vi-badge--pipeline-neurology">--pipeline-neurology</span>
<!-- Badge (mods: --sm, --squish, --pipeline-respiratory) -->
<span class="vi-badge vi-badge--sm vi-badge--squish vi-badge--pipeline-respiratory">--pipeline-respiratory</span>
<!-- Badge (mods: --sm, --squish, --pipeline-biosimilars) -->
<span class="vi-badge vi-badge--sm vi-badge--squish vi-badge--pipeline-biosimilars">--pipeline-biosimilars</span>
<!-- Badge (mods: --sm, --squish, --pipeline-other) -->
<span class="vi-badge vi-badge--sm vi-badge--squish vi-badge--pipeline-other">--pipeline-other</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