Infographic Visual X In Y

v0.0.0

It shows up to 10 icons, differently arranged depending viewport width.

The modifier --total-{n} (where n equals the number of icons used) is required.
To display active icons add the .is-active class to element with class .vi-infographic-x-in-y__icon.

Shows 1 out of 1
The Infographic X In Y has 1 icon and modifier --total-1.
In this case, the .is-active class is set to the 1st element with class .vi-infographic-x-in-y__icon.

<div style="max-width: 300px; box-shadow: 0 0 0 1px rgba(#000, .2);">
  <!-- Infographic Visual X In Y  -->
  <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
  <div aria-label="1 in 1" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-1" role="img">
    <div class="vi-infographic-visual-x-in-y__inner">
      <div class="vi-infographic-visual-x-in-y__canvas">
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
      </div>
    </div>
  </div>
</div>

Shows 1 out of 2
The Infographic X In Y has 2 icons and modifier --total-2.
In this case, the .is-active class is set to the 2nd element with class .vi-infographic-x-in-y__icon.

<div style="max-width: 300px; box-shadow: 0 0 0 1px rgba(#000, .2);">
  <!-- Infographic Visual X In Y  -->
  <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
  <div aria-label="1 in 2" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-2" role="img">
    <div class="vi-infographic-visual-x-in-y__inner">
      <div class="vi-infographic-visual-x-in-y__canvas">
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
      </div>
    </div>
  </div>
</div>

Shows 1 out of 3
The Infographic X In Y has 3 icons and modifier --total-3.
In this case, the .is-active class is set to the 2nd element with class .vi-infographic-x-in-y__icon.

<div style="max-width: 300px; box-shadow: 0 0 0 1px rgba(#000, .2);">
  <!-- Infographic Visual X In Y  -->
  <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
  <div aria-label="1 in 3" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-3" role="img">
    <div class="vi-infographic-visual-x-in-y__inner">
      <div class="vi-infographic-visual-x-in-y__canvas">
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
      </div>
    </div>
  </div>
</div>

Shows 1 out of 4
The Infographic X In Y has 4 icons and modifier --total-4.
In this case, the .is-active class is set to the 2nd element with class .vi-infographic-x-in-y__icon.

<div style="max-width: 300px; box-shadow: 0 0 0 1px rgba(#000, .2);">
  <!-- Infographic Visual X In Y  -->
  <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
  <div aria-label="1 in 4" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-4" role="img">
    <div class="vi-infographic-visual-x-in-y__inner">
      <div class="vi-infographic-visual-x-in-y__canvas">
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
      </div>
    </div>
  </div>
</div>

Shows 1 out of 5
The Infographic X In Y has 5 icons and modifier --total-5.
In this case, the .is-active class is set to the 2nd element with class .vi-infographic-x-in-y__icon.

<div style="max-width: 300px; box-shadow: 0 0 0 1px rgba(#000, .2);">
  <!-- Infographic Visual X In Y  -->
  <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
  <div aria-label="1 in 5" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-5" role="img">
    <div class="vi-infographic-visual-x-in-y__inner">
      <div class="vi-infographic-visual-x-in-y__canvas">
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
      </div>
    </div>
  </div>
</div>

Shows 1 out of 6
The Infographic X In Y has 6 icons and modifier --total-6.
In this case, the .is-active class is set to the 2nd element with class .vi-infographic-x-in-y__icon.

<div style="max-width: 300px; box-shadow: 0 0 0 1px rgba(#000, .2);">
  <!-- Infographic Visual X In Y  -->
  <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
  <div aria-label="1 in 6" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-6" role="img">
    <div class="vi-infographic-visual-x-in-y__inner">
      <div class="vi-infographic-visual-x-in-y__canvas">
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
      </div>
    </div>
  </div>
</div>

Shows 2 out of 7
The Infographic X In Y has 7 icons and modifier --total-7.
In this case, the .is-active class is set to the 2nd and 3rd elements with class .vi-infographic-x-in-y__icon.

<div style="max-width: 300px; box-shadow: 0 0 0 1px rgba(#000, .2);">
  <!-- Infographic Visual X In Y  -->
  <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
  <div aria-label="2 in 7" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-7" role="img">
    <div class="vi-infographic-visual-x-in-y__inner">
      <div class="vi-infographic-visual-x-in-y__canvas">
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
      </div>
    </div>
  </div>
</div>

Shows 2 out of 8
The Infographic X In Y has 8 icons and modifier --total-8.
In this case, the .is-active class is set to the 2nd and 3rd elements with class .vi-infographic-x-in-y__icon.

<div style="max-width: 300px; box-shadow: 0 0 0 1px rgba(#000, .2);">
  <!-- Infographic Visual X In Y  -->
  <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
  <div aria-label="2 in 8" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-8" role="img">
    <div class="vi-infographic-visual-x-in-y__inner">
      <div class="vi-infographic-visual-x-in-y__canvas">
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
      </div>
    </div>
  </div>
</div>

Shows 2 out of 9
The Infographic X In Y has 9 icons and modifier --total-9.
In this case, the .is-active class is set to the 2nd and 3rd elements with class .vi-infographic-x-in-y__icon.

<div style="max-width: 300px; box-shadow: 0 0 0 1px rgba(#000, .2);">
  <!-- Infographic Visual X In Y  -->
  <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
  <div aria-label="2 in 9" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-9" role="img">
    <div class="vi-infographic-visual-x-in-y__inner">
      <div class="vi-infographic-visual-x-in-y__canvas">
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
      </div>
    </div>
  </div>
</div>

Shows 2 out of 10
The Infographic X In Y has 10 icons and modifier --total-10.
In this case, the .is-active class is set to the 2nd and 3rd elements with class .vi-infographic-x-in-y__icon.

<div style="max-width: 300px; box-shadow: 0 0 0 1px rgba(#000, .2);">
  <!-- Infographic Visual X In Y  -->
  <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
  <div aria-label="2 in 10" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-10" role="img">
    <div class="vi-infographic-visual-x-in-y__inner">
      <div class="vi-infographic-visual-x-in-y__canvas">
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="is-active vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
        <div class="vi-infographic-visual-x-in-y__icon">
          <!-- Icon person  -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
        <span class="vi-infographic-visual-x-in-y__break"></span>
      </div>
    </div>
  </div>
</div>

In card #

Example of use in Infographic Card.

200,000,000

people

200,000,000

people

<div class="vi-grid">
  <div class="vi-grid__row vi-grid__row--grid-15">
    <div class="col-md-4 col-lg-6 col-xl-4">
      <!-- Infographic Card  -->
      <div class="vi-infographic-card">
        <div class="vi-infographic-card__content">
          <div class="vi-infographic-card__head">
            <div class="vi-infographic-card__visual">
              <!-- Infographic Visual X In Y  -->
              <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
              <div aria-label="1 in 9" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-9" role="img">
                <div class="vi-infographic-visual-x-in-y__inner">
                  <div class="vi-infographic-visual-x-in-y__canvas">
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="is-active vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="vi-infographic-card__main">
            <div class="vi-infographic-card__value">200,000,000</div>
            <div class="vi-infographic-card__label">people</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="vi-grid">
  <div class="vi-grid__row vi-grid__row--grid-15">
    <div class="col-md-4 col-lg-6 col-xl-4">
      <!-- Infographic Card (mods: --reverse) -->
      <div class="vi-infographic-card vi-infographic-card--reverse">
        <div class="vi-infographic-card__content vi-infographic-card__content--reverse">
          <div class="vi-infographic-card__head vi-infographic-card__head--reverse">
            <div class="vi-infographic-card__visual vi-infographic-card__visual--reverse">
              <!-- Infographic Visual X In Y  -->
              <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
              <div aria-label="1 in 9" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-9" role="img">
                <div class="vi-infographic-visual-x-in-y__inner">
                  <div class="vi-infographic-visual-x-in-y__canvas">
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="is-active vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="vi-infographic-card__main vi-infographic-card__main--reverse">
            <div class="vi-infographic-card__value vi-infographic-card__value--reverse">200,000,000</div>
            <div class="vi-infographic-card__label vi-infographic-card__label--reverse">people</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

When card has modifier --display.

200,000,000

people

200,000,000

people

<div class="vi-grid">
  <div class="vi-grid__row vi-grid__row--grid-15">
    <div class="col-md-6 col-xl-4">
      <!-- Infographic Card (mods: --display) -->
      <div class="vi-infographic-card vi-infographic-card--display">
        <div class="vi-infographic-card__content vi-infographic-card__content--display">
          <div class="vi-infographic-card__head vi-infographic-card__head--display">
            <div class="vi-infographic-card__visual vi-infographic-card__visual--display">
              <!-- Infographic Visual X In Y  -->
              <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
              <div aria-label="1 in 9" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-9" role="img">
                <div class="vi-infographic-visual-x-in-y__inner">
                  <div class="vi-infographic-visual-x-in-y__canvas">
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="is-active vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="vi-infographic-card__main vi-infographic-card__main--display">
            <div class="vi-infographic-card__value vi-infographic-card__value--display">200,000,000</div>
            <div class="vi-infographic-card__label vi-infographic-card__label--display">people</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="vi-grid">
  <div class="vi-grid__row vi-grid__row--grid-15">
    <div class="col-md-6 col-xl-4">
      <!-- Infographic Card (mods: --display, --reverse) -->
      <div class="vi-infographic-card vi-infographic-card--display vi-infographic-card--reverse">
        <div class="vi-infographic-card__content vi-infographic-card__content--display vi-infographic-card__content--reverse">
          <div class="vi-infographic-card__head vi-infographic-card__head--display vi-infographic-card__head--reverse">
            <div class="vi-infographic-card__visual vi-infographic-card__visual--display vi-infographic-card__visual--reverse">
              <!-- Infographic Visual X In Y  -->
              <!-- Please note the --n modifier. It should equal the nr of icons (not zero based!) -->
              <div aria-label="1 in 9" class="vi-infographic-visual-x-in-y vi-infographic-visual-x-in-y--total-9" role="img">
                <div class="vi-infographic-visual-x-in-y__inner">
                  <div class="vi-infographic-visual-x-in-y__canvas">
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="is-active vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                    <div class="vi-infographic-visual-x-in-y__icon">
                      <!-- Icon person  -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="person"><path d="M67.5 51.5c6.7-5.4 10.6-13.5 10.6-22.2C78.1 13.7 65.5 1 50 1 34.5 1 21.9 13.7 21.9 29.3c0 8.6 3.9 16.8 10.6 22.2C15.9 58.5 4.2 75 4.2 94.1 4.2 96.8 6.4 99 9 99c2.7 0 4.8-2.2 4.8-4.9C13.8 74 30.1 57.7 50 57.7c19.9 0 36.2 16.4 36.2 36.5 0 2.7 2.1 4.8 4.8 4.9 2.7 0 4.8-2.2 4.8-4.9 0-18.7-11.1-35.5-28.3-42.7zM50 48c-10.2 0-18.5-8.4-18.5-18.6 0-10.3 8.3-18.6 18.5-18.6s18.5 8.4 18.5 18.6C68.5 39.6 60.2 48 50 48z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="vi-infographic-visual-x-in-y__break"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="vi-infographic-card__main vi-infographic-card__main--display vi-infographic-card__main--reverse">
            <div class="vi-infographic-card__value vi-infographic-card__value--display vi-infographic-card__value--reverse">200,000,000</div>
            <div class="vi-infographic-card__label vi-infographic-card__label--display vi-infographic-card__label--reverse">people</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascript is required to display this component.

Download Infographic Visual X In Y JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  28 June 2022 - Fix scrollparent detector


Added

  Accessibility: changes.
  RTL support.
  Initial draft