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

Infographic Layout

v0.0.0

Contains the very specific layout styling of the infographic (css only).

Basic structure markup looks like this:

<!-- Infographic Layout (mods: --sample-section) -->
<div class="vi-infographic-layout vi-infographic-layout--sample-section">
  <div class="vi-infographic-layout__content">
    <div class="vi-infographic-layout__section vi-infographic-layout__section--sample-section vi-infographic-layout__section--sample-section-head vi-infographic-layout__section--head">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        ...
      </div>
    </div>
    <div class="vi-infographic-layout__section vi-infographic-layout__section--sample-section vi-infographic-layout__section--sample-section-body vi-infographic-layout__section--body">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        <div class="vi-infographic-layout__visual">
          ...
        </div>
      </div>
    </div>
    <div class="vi-infographic-layout__section vi-infographic-layout__section--sample-section vi-infographic-layout__section--sample-section-foot vi-infographic-layout__section--foot">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        ...
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheet is required to display this component.

The following additional stylesheet is used to display the example(s).

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • Unreachable link issue (section 1)

Added

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