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

Figure

v0.0.1-alpha.0

Use the figure component to show image, video (or other self-contained) content.

It has the following modifier:

  • --fixed-ratio for manual settable intrinsic ratios.

Fixed Ratio #

Use the --fixed-ratio modifier to create an intrinsic ratio that scales on any device.

Rules are directly applied to <iframe>, <embed>, <video> and <object> elements*. Optionally use an explicit descendant class .vi-figure__embed when you want to match the styling for other attributes.

When using the --fixed-ratio modifier, without any further modifiers, you have to manualy set the padding-top on the .vi-figure__content element. To calculate the padding-top percentage use 100% * height / width.

* For images use Rectangular Image.

alt text 
<figure class="vi-figure vi-figure--fixed-ratio">
  <div class="vi-figure__content vi-figure__content--fixed-ratio" style="padding-top: 56.379821958%;">
    <img alt="alt text" loading="lazy" src="/assets/images/static/test-674x380.jpg" srcset="/assets/images/static/test-674x380.jpg, /assets/images/static/test-1348x760.jpg 2x">
  </div>
</figure>

Ratio Hero Images #

Deprecated please use Rectangular Image with --hero-image modifier.

Stylesheets #

The following stylesheet is required to display this component.

Stylesheets #

The following stylesheet is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Changed

Added

  • Initial draft