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

Infographic Counter

v0.0.0

The Infographic Visual Counter shows a unit, a quantifier and a slot (machine) along with a title and description.

Savings in 2018
to the US healthcare system
Savings in 2018
to the US healthcare system
<!-- Infographic Counter  -->
<div class="vi-infographic-counter">
  <div aria-label="$ Million 2.59" class="vi-infographic-counter__display" role="img">
    <div class="vi-infographic-counter__label">
      <div class="vi-infographic-counter__unit-quantifier">
        <div class="vi-infographic-counter__unit">$</div>
        <div class="vi-infographic-counter__quantifier">Million</div>
      </div>
    </div>
    <div class="vi-infographic-counter__value">
      <div class="vi-infographic-counter__slot">
        2.59
      </div>
    </div>
  </div>
  <div class="vi-infographic-counter__description">
    <div class="vi-infographic-counter__title">Savings in 2018</div>
    <div class="vi-infographic-counter__subtitle">to the US healthcare system</div>
  </div>
</div>
<hr>
<!-- Infographic Counter  -->
<div class="vi-infographic-counter">
  <div aria-label="$ false 2.59" class="vi-infographic-counter__display" role="img">
    <div class="vi-infographic-counter__label">
      <div class="vi-infographic-counter__unit-quantifier">
        <div class="vi-infographic-counter__unit">$</div>
      </div>
    </div>
    <div class="vi-infographic-counter__value">
      <div class="vi-infographic-counter__slot">
        2.59
      </div>
    </div>
  </div>
  <div class="vi-infographic-counter__description">
    <div class="vi-infographic-counter__title">Savings in 2018</div>
    <div class="vi-infographic-counter__subtitle">to the US healthcare system</div>
  </div>
</div>
Savings in 2018
to the US healthcare system
Savings in 2018
to the US healthcare system
<!-- Infographic Counter  -->
<div class="vi-infographic-counter">
  <div aria-label="HKD Million 2,65" class="vi-infographic-counter__display" role="img">
    <div class="vi-infographic-counter__label">
      <div class="vi-infographic-counter__unit-quantifier">
        <div class="vi-infographic-counter__unit">HKD</div>
        <div class="vi-infographic-counter__quantifier">Million</div>
      </div>
    </div>
    <div class="vi-infographic-counter__value">
      <div class="vi-infographic-counter__slot">
        2,65
      </div>
    </div>
  </div>
  <div class="vi-infographic-counter__description">
    <div class="vi-infographic-counter__title">Savings in 2018</div>
    <div class="vi-infographic-counter__subtitle">to the US healthcare system</div>
  </div>
</div>
<hr>
<!-- Infographic Counter  -->
<div class="vi-infographic-counter">
  <div aria-label="HKD false 2,65" class="vi-infographic-counter__display" role="img">
    <div class="vi-infographic-counter__label">
      <div class="vi-infographic-counter__unit-quantifier">
        <div class="vi-infographic-counter__unit">HKD</div>
      </div>
    </div>
    <div class="vi-infographic-counter__value">
      <div class="vi-infographic-counter__slot">
        2,65
      </div>
    </div>
  </div>
  <div class="vi-infographic-counter__description">
    <div class="vi-infographic-counter__title">Savings in 2018</div>
    <div class="vi-infographic-counter__subtitle">to the US healthcare system</div>
  </div>
</div>
Savings in 2018
to the US healthcare system
Savings in 2018
to the US healthcare system
<!-- Infographic Counter  -->
<div class="vi-infographic-counter">
  <div aria-label="€ Millionen 2,65" class="vi-infographic-counter__display" role="img">
    <div class="vi-infographic-counter__label">
      <div class="vi-infographic-counter__unit-quantifier">
        <div class="vi-infographic-counter__unit">€</div>
        <div class="vi-infographic-counter__quantifier">Millionen</div>
      </div>
    </div>
    <div class="vi-infographic-counter__value">
      <div class="vi-infographic-counter__slot">
        2,65
      </div>
    </div>
  </div>
  <div class="vi-infographic-counter__description">
    <div class="vi-infographic-counter__title">Savings in 2018</div>
    <div class="vi-infographic-counter__subtitle">to the US healthcare system</div>
  </div>
</div>
<hr>
<!-- Infographic Counter  -->
<div class="vi-infographic-counter">
  <div aria-label="€ false 5,55" class="vi-infographic-counter__display" role="img">
    <div class="vi-infographic-counter__label">
      <div class="vi-infographic-counter__unit-quantifier">
        <div class="vi-infographic-counter__unit">€</div>
      </div>
    </div>
    <div class="vi-infographic-counter__value">
      <div class="vi-infographic-counter__slot">
        5,55
      </div>
    </div>
  </div>
  <div class="vi-infographic-counter__description">
    <div class="vi-infographic-counter__title">Savings in 2018</div>
    <div class="vi-infographic-counter__subtitle">to the US healthcare system</div>
  </div>
</div>

Stylesheets #

The following stylesheet is required to display this component.

JavaScript #

The following javascript is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • 28 June 2022 - Fix scrollparent detector

Added

  • Accessibility: changes.
  • RTL support.
  • Initial draft