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

Infographic Bullet

v0.0.0

Infographic Bullets are used before section headlines.

Different bullet types are defined.

All bullets have size modifiers with breakpoint prefixes;

Use:

  • .vi-infographic-bullet--size-{size}
  • .vi-infographic-bullet--size-{breakpoint}-{size}

for gaps between columns. Where:

  • breakpoint can be any of the values sm, md, lg xl or xxl
  • size can be any fo the values 1 to 5

Pattern #

01

with modifier

01
01
01
01
01 
<!-- Infographic Bullet type: pattern  -->
<div class="vi-infographic-bullet-pattern vi-infographic-bullet">
  <div class="vi-infographic-bullet-pattern__inner vi-infographic-bullet__inner">
    <div aria-hidden="true" class="vi-pattern vi-pattern--random-primary vi-infographic-bullet-pattern__object vi-infographic-bullet__object"></div>
    <div class="vi-infographic-bullet-pattern__value vi-infographic-bullet__value">
      01
    </div>
  </div>
</div>
<p class="my-10 small text-muted sg-hidden">with modifier</p>
<!-- Infographic Bullet type: pattern (mods: --size-1) -->
<div class="vi-infographic-bullet-pattern vi-infographic-bullet vi-infographic-bullet--size-1">
  <div class="vi-infographic-bullet-pattern__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-1">
    <div aria-hidden="true" class="vi-pattern vi-pattern--random-primary vi-infographic-bullet-pattern__object vi-infographic-bullet__object vi-infographic-bullet__object--size-1"></div>
    <div class="vi-infographic-bullet-pattern__value vi-infographic-bullet__value vi-infographic-bullet__value--size-1">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: pattern (mods: --size-2) -->
<div class="vi-infographic-bullet-pattern vi-infographic-bullet vi-infographic-bullet--size-2">
  <div class="vi-infographic-bullet-pattern__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-2">
    <div aria-hidden="true" class="vi-pattern vi-pattern--random-primary vi-infographic-bullet-pattern__object vi-infographic-bullet__object vi-infographic-bullet__object--size-2"></div>
    <div class="vi-infographic-bullet-pattern__value vi-infographic-bullet__value vi-infographic-bullet__value--size-2">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: pattern (mods: --size-3) -->
<div class="vi-infographic-bullet-pattern vi-infographic-bullet vi-infographic-bullet--size-3">
  <div class="vi-infographic-bullet-pattern__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-3">
    <div aria-hidden="true" class="vi-pattern vi-pattern--random-primary vi-infographic-bullet-pattern__object vi-infographic-bullet__object vi-infographic-bullet__object--size-3"></div>
    <div class="vi-infographic-bullet-pattern__value vi-infographic-bullet__value vi-infographic-bullet__value--size-3">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: pattern (mods: --size-4) -->
<div class="vi-infographic-bullet-pattern vi-infographic-bullet vi-infographic-bullet--size-4">
  <div class="vi-infographic-bullet-pattern__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-4">
    <div aria-hidden="true" class="vi-pattern vi-pattern--random-primary vi-infographic-bullet-pattern__object vi-infographic-bullet__object vi-infographic-bullet__object--size-4"></div>
    <div class="vi-infographic-bullet-pattern__value vi-infographic-bullet__value vi-infographic-bullet__value--size-4">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: pattern (mods: --size-5) -->
<div class="vi-infographic-bullet-pattern vi-infographic-bullet vi-infographic-bullet--size-5">
  <div class="vi-infographic-bullet-pattern__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-5">
    <div aria-hidden="true" class="vi-pattern vi-pattern--random-primary vi-infographic-bullet-pattern__object vi-infographic-bullet__object vi-infographic-bullet__object--size-5"></div>
    <div class="vi-infographic-bullet-pattern__value vi-infographic-bullet__value vi-infographic-bullet__value--size-5">
      01
    </div>
  </div>
</div>

Infographic Bullets are used before section headlines.

Flat #

01

with modifier

01
01
01
01
01 
<!-- Infographic Bullet type: flat  -->
<div class="vi-infographic-bullet-flat vi-infographic-bullet">
  <div class="vi-infographic-bullet-flat__inner vi-infographic-bullet__inner">
    <div aria-hidden="true" class="vi-infographic-bullet-flat__object vi-infographic-bullet__object"></div>
    <div class="vi-infographic-bullet-flat__value vi-infographic-bullet__value">
      01
    </div>
  </div>
</div>
<p class="my-10 small text-muted sg-hidden">with modifier</p>
<!-- Infographic Bullet type: flat (mods: --size-1) -->
<div class="vi-infographic-bullet-flat vi-infographic-bullet vi-infographic-bullet--size-1">
  <div class="vi-infographic-bullet-flat__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-1">
    <div aria-hidden="true" class="vi-infographic-bullet-flat__object vi-infographic-bullet__object vi-infographic-bullet__object--size-1"></div>
    <div class="vi-infographic-bullet-flat__value vi-infographic-bullet__value vi-infographic-bullet__value--size-1">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: flat (mods: --size-2) -->
<div class="vi-infographic-bullet-flat vi-infographic-bullet vi-infographic-bullet--size-2">
  <div class="vi-infographic-bullet-flat__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-2">
    <div aria-hidden="true" class="vi-infographic-bullet-flat__object vi-infographic-bullet__object vi-infographic-bullet__object--size-2"></div>
    <div class="vi-infographic-bullet-flat__value vi-infographic-bullet__value vi-infographic-bullet__value--size-2">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: flat (mods: --size-3) -->
<div class="vi-infographic-bullet-flat vi-infographic-bullet vi-infographic-bullet--size-3">
  <div class="vi-infographic-bullet-flat__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-3">
    <div aria-hidden="true" class="vi-infographic-bullet-flat__object vi-infographic-bullet__object vi-infographic-bullet__object--size-3"></div>
    <div class="vi-infographic-bullet-flat__value vi-infographic-bullet__value vi-infographic-bullet__value--size-3">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: flat (mods: --size-4) -->
<div class="vi-infographic-bullet-flat vi-infographic-bullet vi-infographic-bullet--size-4">
  <div class="vi-infographic-bullet-flat__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-4">
    <div aria-hidden="true" class="vi-infographic-bullet-flat__object vi-infographic-bullet__object vi-infographic-bullet__object--size-4"></div>
    <div class="vi-infographic-bullet-flat__value vi-infographic-bullet__value vi-infographic-bullet__value--size-4">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: flat (mods: --size-5) -->
<div class="vi-infographic-bullet-flat vi-infographic-bullet vi-infographic-bullet--size-5">
  <div class="vi-infographic-bullet-flat__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-5">
    <div aria-hidden="true" class="vi-infographic-bullet-flat__object vi-infographic-bullet__object vi-infographic-bullet__object--size-5"></div>
    <div class="vi-infographic-bullet-flat__value vi-infographic-bullet__value vi-infographic-bullet__value--size-5">
      01
    </div>
  </div>
</div>

Gradient #

01

with modifier

01
01
01
01
01 
<!-- Infographic Bullet type: gradient  -->
<div class="vi-infographic-bullet-gradient vi-infographic-bullet">
  <div class="vi-infographic-bullet-gradient__inner vi-infographic-bullet__inner">
    <div aria-hidden="true" class="vi-pattern vi-pattern--gradient vi-infographic-bullet-gradient__object vi-infographic-bullet__object"></div>
    <div class="vi-infographic-bullet-gradient__value vi-infographic-bullet__value">
      01
    </div>
  </div>
</div>
<p class="my-10 small text-muted sg-hidden">with modifier</p>
<!-- Infographic Bullet type: gradient (mods: --size-1) -->
<div class="vi-infographic-bullet-gradient vi-infographic-bullet vi-infographic-bullet--size-1">
  <div class="vi-infographic-bullet-gradient__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-1">
    <div aria-hidden="true" class="vi-pattern vi-pattern--gradient vi-infographic-bullet-gradient__object vi-infographic-bullet__object vi-infographic-bullet__object--size-1"></div>
    <div class="vi-infographic-bullet-gradient__value vi-infographic-bullet__value vi-infographic-bullet__value--size-1">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: gradient (mods: --size-2) -->
<div class="vi-infographic-bullet-gradient vi-infographic-bullet vi-infographic-bullet--size-2">
  <div class="vi-infographic-bullet-gradient__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-2">
    <div aria-hidden="true" class="vi-pattern vi-pattern--gradient vi-infographic-bullet-gradient__object vi-infographic-bullet__object vi-infographic-bullet__object--size-2"></div>
    <div class="vi-infographic-bullet-gradient__value vi-infographic-bullet__value vi-infographic-bullet__value--size-2">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: gradient (mods: --size-3) -->
<div class="vi-infographic-bullet-gradient vi-infographic-bullet vi-infographic-bullet--size-3">
  <div class="vi-infographic-bullet-gradient__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-3">
    <div aria-hidden="true" class="vi-pattern vi-pattern--gradient vi-infographic-bullet-gradient__object vi-infographic-bullet__object vi-infographic-bullet__object--size-3"></div>
    <div class="vi-infographic-bullet-gradient__value vi-infographic-bullet__value vi-infographic-bullet__value--size-3">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: gradient (mods: --size-4) -->
<div class="vi-infographic-bullet-gradient vi-infographic-bullet vi-infographic-bullet--size-4">
  <div class="vi-infographic-bullet-gradient__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-4">
    <div aria-hidden="true" class="vi-pattern vi-pattern--gradient vi-infographic-bullet-gradient__object vi-infographic-bullet__object vi-infographic-bullet__object--size-4"></div>
    <div class="vi-infographic-bullet-gradient__value vi-infographic-bullet__value vi-infographic-bullet__value--size-4">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: gradient (mods: --size-5) -->
<div class="vi-infographic-bullet-gradient vi-infographic-bullet vi-infographic-bullet--size-5">
  <div class="vi-infographic-bullet-gradient__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-5">
    <div aria-hidden="true" class="vi-pattern vi-pattern--gradient vi-infographic-bullet-gradient__object vi-infographic-bullet__object vi-infographic-bullet__object--size-5"></div>
    <div class="vi-infographic-bullet-gradient__value vi-infographic-bullet__value vi-infographic-bullet__value--size-5">
      01
    </div>
  </div>
</div>

Gradient Border #

01

with modifier

01
01
01
01
01 
<!-- Infographic Bullet type: gradient-border  -->
<div class="vi-infographic-bullet-gradient-border vi-infographic-bullet">
  <div class="vi-infographic-bullet-gradient-border__inner vi-infographic-bullet__inner">
    <div aria-hidden="true" class="vi-pattern vi-pattern--gradient vi-infographic-bullet-gradient-border__object vi-infographic-bullet__object"></div>
    <div class="vi-infographic-bullet-gradient-border__value vi-infographic-bullet__value">
      01
    </div>
  </div>
</div>
<p class="my-10 small text-muted sg-hidden">with modifier</p>
<!-- Infographic Bullet type: gradient-border (mods: --size-1) -->
<div class="vi-infographic-bullet-gradient-border vi-infographic-bullet vi-infographic-bullet--size-1">
  <div class="vi-infographic-bullet-gradient-border__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-1">
    <div aria-hidden="true" class="vi-pattern vi-pattern--gradient vi-infographic-bullet-gradient-border__object vi-infographic-bullet__object vi-infographic-bullet__object--size-1"></div>
    <div class="vi-infographic-bullet-gradient-border__value vi-infographic-bullet__value vi-infographic-bullet__value--size-1">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: gradient-border (mods: --size-2) -->
<div class="vi-infographic-bullet-gradient-border vi-infographic-bullet vi-infographic-bullet--size-2">
  <div class="vi-infographic-bullet-gradient-border__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-2">
    <div aria-hidden="true" class="vi-pattern vi-pattern--gradient vi-infographic-bullet-gradient-border__object vi-infographic-bullet__object vi-infographic-bullet__object--size-2"></div>
    <div class="vi-infographic-bullet-gradient-border__value vi-infographic-bullet__value vi-infographic-bullet__value--size-2">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: gradient-border (mods: --size-3) -->
<div class="vi-infographic-bullet-gradient-border vi-infographic-bullet vi-infographic-bullet--size-3">
  <div class="vi-infographic-bullet-gradient-border__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-3">
    <div aria-hidden="true" class="vi-pattern vi-pattern--gradient vi-infographic-bullet-gradient-border__object vi-infographic-bullet__object vi-infographic-bullet__object--size-3"></div>
    <div class="vi-infographic-bullet-gradient-border__value vi-infographic-bullet__value vi-infographic-bullet__value--size-3">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: gradient-border (mods: --size-4) -->
<div class="vi-infographic-bullet-gradient-border vi-infographic-bullet vi-infographic-bullet--size-4">
  <div class="vi-infographic-bullet-gradient-border__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-4">
    <div aria-hidden="true" class="vi-pattern vi-pattern--gradient vi-infographic-bullet-gradient-border__object vi-infographic-bullet__object vi-infographic-bullet__object--size-4"></div>
    <div class="vi-infographic-bullet-gradient-border__value vi-infographic-bullet__value vi-infographic-bullet__value--size-4">
      01
    </div>
  </div>
</div>
<!-- Infographic Bullet type: gradient-border (mods: --size-5) -->
<div class="vi-infographic-bullet-gradient-border vi-infographic-bullet vi-infographic-bullet--size-5">
  <div class="vi-infographic-bullet-gradient-border__inner vi-infographic-bullet__inner vi-infographic-bullet__inner--size-5">
    <div aria-hidden="true" class="vi-pattern vi-pattern--gradient vi-infographic-bullet-gradient-border__object vi-infographic-bullet__object vi-infographic-bullet__object--size-5"></div>
    <div class="vi-infographic-bullet-gradient-border__value vi-infographic-bullet__value vi-infographic-bullet__value--size-5">
      01
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascripts are 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