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

Rectangular Image

v0.0.0

The Rectangular Image component shows rectangular images and prevent unwanted reflow* by using an intrinsic ratio of 4:3 that scales on any device.

Please note that the aspect ratio of 4:3 is maintained no matter what image size is used. There is currently no good way of having responsive images without reflow.

Modifiers are used to provide different aspect ratios troughout the design.

By default the Rectangular Image stretches to the width of it's container.

* Browsers lazy load images by design. Until an image starts to load, the browser doesn’t know the dimensions of the image. So, on render the image causes reflow.

alt text
no reflow
alt text
no reflow
<!-- container -->
<div style="max-width: 260px; width: 100%; display: inline-block">
  <!-- Rectangular Image  -->
  <div class="vi-rectangular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x450.jpg"></div>
</div>
<!-- container -->
<div style="max-width: 260px; width: 100%; display: inline-block">
  <!-- Rectangular Image  -->
  <div class="vi-rectangular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x450.jpg"></div>
</div>

Link #

The Rectangular Image component can also be a link.

alt text 
<!-- container -->
<div style="max-width: 260px;">
  <!-- Rectangular Image  -->
  <a class="vi-rectangular-image" href="#sample"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x450.jpg"></a>
</div>

Picture #

The Rectangular Image component can contain a <picture> element.

Please note that the aspect ratio of 4:3 is maintained no matter what picture size is used. Modifiers are used to provide for different aspect ratios of picture elements troughout the design.

alt text 
<!-- container -->
<div style="max-width: 260px;">
  <!-- Rectangular Image  -->
  <div class="vi-rectangular-image"><picture>
      <source media="(max-width:767px)" srcset="/assets/images/static/test-400x300.jpg, /assets/images/static/test-800x600.jpg 2x">
      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-1200x900.jpg" srcset="/assets/images/static/test-1200x900.jpg, /assets/images/static/test-2400x1800.jpg 2x">
    </picture></div>
</div>

Modifiers

The following modifiers are available:

Custom #

Use the --custom modifer to set the ratio yourself.

Apply the ratio by setting the css attribute padding-top via inline style.

Percentage value can be calculated by the following formula (height / width) * 100.

alt text
alt text
<div class="d-flex">
  <div style="max-width: 260px; width: 100%">
    <!-- Rectangular Image (mods: --custom) -->
    <div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 135.71429%"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-350x475.jpg" srcset="/assets/images/static/test-350x475.jpg, /assets/images/static/test-700x950.jpg 2x"></div>
  </div>
  <div style="max-width: 260px; width: 100%">
    <!-- Rectangular Image (mods: --custom) -->
    <div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 33.33333%"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x200.jpg" srcset="/assets/images/static/test-600x200.jpg, /assets/images/static/test-1200x400.jpg 2x"></div>
  </div>
</div>

Square #

--square preset ratio for showing square images.

The aspect ratio of 1:1 is maintained no matter what image size is used.

alt text
<div style="max-width: 260px;">
  <!-- Rectangular Image (mods: --square) -->
  <div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg"></div>
</div>

Video #

--video preset ratio for showing images in same aspect ratio as video.

The aspect ratio of 16:9 is maintained no matter what image size is used.

alt text
<div style="max-width: 260px;">
  <!-- Rectangular Image (mods: --video) -->
  <div class="vi-rectangular-image vi-rectangular-image--video"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x169.jpg"></div>
</div>

Hero Image #

Use the --hero-image preset ratio for showing hero images (not hero components) on top of (article) page. Image provided by <picture> element with two different ratios depending screen-size:

  • 360x230px <= 767px
  • 720x460px (hidpi) <= 767px
  • 1026x430px > 767px
  • 2052x860px (hidpi) > 767px
alt text 
<!-- Rectangular Image (mods: --hero-image) -->
<div class="vi-rectangular-image vi-rectangular-image--hero-image"><picture>
    <source media="(max-width:767px)" srcset="/assets/images/static/test-360x230.jpg, /assets/images/static/test-720x460.jpg 2x">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-1026x430.jpg" srcset="/assets/images/static/test-1026x430.jpg, /assets/images/static/test-2052x860.jpg 2x">
  </picture></div>

Card Classic #

--card-classic preset ratio for use with Classic Card.
Image provided by <picture> element with two different ratios depending screen-size:

  • 300x205px <= 767px
  • 600x410px (hidpi) <= 767px
  • 498x280px > 767px
  • 996x560px (hidpi) > 767px
alt text 
<!-- Rectangular Image (mods: --card-classic) -->
<div class="vi-rectangular-image vi-rectangular-image--card-classic"><picture>
    <source media="(max-width:767px)" srcset="/assets/images/static/test-300x205.jpg, /assets/images/static/test-600x410.jpg 2x">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-498x280.jpg" srcset="/assets/images/static/test-498x280.jpg, /assets/images/static/test-996x560.jpg 2x">
  </picture></div>

Card Story #

--card-story preset ratio for use with Story Card.
Image provided by <picture> element with two different ratios depending screen-size:

  • 300x190px <= 767px
  • 600x380px (hidpi) <= 767px
  • 322x190px > 767px
  • 644x380px (hidpi) > 767px
alt text 
<!-- Rectangular Image (mods: --card-story) -->
<div class="vi-rectangular-image vi-rectangular-image--card-story"><picture>
    <source media="(max-width:767px)" srcset="/assets/images/static/test-300x190.jpg, /assets/images/static/test-600x380.jpg 2x">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-322x190.jpg" srcset="/assets/images/static/test-322x190.jpg, /assets/images/static/test-644x380.jpg 2x">
  </picture></div>

Strip Classic #

--strip-classic preset ratio for use with Strip Classic.
Image provided by <picture> element with three different ratios depending screen-size:

  • 360x221px <= 767px
  • 720x442px (hidpi) <= 767px
  • 768x380px <= 959px
  • 1536x760px (hidpi) <= 959px
  • 520x460px > 959px
  • 1040x920px (hidpi) > 959px
alt text 
<!-- Rectangular Image (mods: --strip-classic) -->
<div class="vi-rectangular-image vi-rectangular-image--strip-classic"><picture>
    <source media="(max-width:767px)" srcset="/assets/images/static/test-360x221.jpg, /assets/images/static/test-720x442.jpg 2x">
    <source media="(max-width:959px)" srcset="/assets/images/static/test-768x380.jpg, /assets/images/static/test-1536x760.jpg 2x">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-520x460.jpg" srcset="/assets/images/static/test-520x460.jpg, /assets/images/static/test-1040x920.jpg 2x">
  </picture></div>

Strip Epic #

--strip-epic preset ratio for use with Strip Epic.
Image provided by <picture> element with three different ratios depending screen-size:

  • 360x230px <= 767px
  • 720x460px (hidpi) <= 767px
  • 768x510 <= 959px
  • 1536x1020px (hidpi) <= 959px
  • 720x530 > 959px
  • 1440x1060px (hidpi) > 959px
alt text 
<!-- Rectangular Image (mods: --strip-epic) -->
<div class="vi-rectangular-image vi-rectangular-image--strip-epic"><picture>
    <source media="(max-width:767px)" srcset="/assets/images/static/test-360x230.jpg, /assets/images/static/test-720x460.jpg 2x">
    <source media="(max-width:959px)" srcset="/assets/images/static/test-768x510.jpg, /assets/images/static/test-1536x1020.jpg 2x">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-720x530.jpg" srcset="/assets/images/static/test-720x530.jpg, /assets/images/static/test-1440x1060.jpg 2x">
  </picture></div>

Strip Hero #

--strip-hero preset ratio for use with Strip Hero.
Image provided by <picture> element with three different ratios depending screen-size:

  • 360x360px <= 767px
  • 720x720px (hidpi) <= 767px
  • 768x470 <= 959px
  • 1536x940px (hidpi) <= 959px
  • 910x530 > 959px
  • 1820x1060px (hidpi) > 959px
alt text 
<!-- Rectangular Image (mods: --strip-hero) -->
<div class="vi-rectangular-image vi-rectangular-image--strip-hero"><picture>
    <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
    <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
  </picture></div>

Strip Hero Navigation #

--strip-hero-navigation preset ratio for use with Strip Hero Navigation.
Image provided by <picture> element with three different ratios depending screen-size:

  • 360x230px <= 767px
  • 720x460px (hidpi) <= 767px
  • 734x510px > 767px
  • 1468x1020px (hidpi) > 767px
alt text 
<!-- Rectangular Image (mods: --strip-hero-navigation) -->
<div class="vi-rectangular-image vi-rectangular-image--strip-hero-navigation"><picture>
    <source media="(max-width:767px)" srcset="/assets/images/static/test-360x230.jpg, /assets/images/static/test-720x460.jpg 2x">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-734x510.jpg" srcset="/assets/images/static/test-734x510.jpg, /assets/images/static/test-1468x1020.jpg 2x">
  </picture></div>

Strip Site Split #

--strip-site-split preset ratio for use with Strip Site Split.
Images are provided by <img> elements:

  • 557x700px
  • 1114x1400px (hidpi)

Depending on two or three images one of the following modifiers is required:

  • vi-rectangular-image--strip-site-split-2
  • vi-rectangular-image--strip-site-split-3
alt text alt text 
<!-- Container  -->
<div class="vi-container">
  <div style="aspect-ratio: 21/9">
    <!-- Rectangular Image (mods: --strip-site-split, --strip-site-split-2, --fit) -->
    <div class="vi-rectangular-image vi-rectangular-image--strip-site-split vi-rectangular-image--strip-site-split-2 vi-rectangular-image--fit">
      <picture>
        <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-557x700.jpg" srcset="/assets/images/static/test-557x700.jpg, /assets/images/static/test-1114x1400.jpg 2x">
      </picture>
      <picture>
        <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-557x700.jpg" srcset="/assets/images/static/test-557x700.jpg, /assets/images/static/test-1114x1400.jpg 2x">
      </picture>
    </div>
  </div>
</div>

Three images example

alt text alt text alt text 
<!-- Container  -->
<div class="vi-container">
  <div style="aspect-ratio: 21/9">
    <!-- Rectangular Image (mods: --strip-site-split, --strip-site-split-3, --fit) -->
    <div class="vi-rectangular-image vi-rectangular-image--strip-site-split vi-rectangular-image--strip-site-split-3 vi-rectangular-image--fit">
      <picture>
        <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-557x700.jpg" srcset="/assets/images/static/test-557x700.jpg, /assets/images/static/test-1114x1400.jpg 2x">
      </picture>
      <picture>
        <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-557x700.jpg" srcset="/assets/images/static/test-557x700.jpg, /assets/images/static/test-1114x1400.jpg 2x">
      </picture>
      <picture>
        <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-557x700.jpg" srcset="/assets/images/static/test-557x700.jpg, /assets/images/static/test-1114x1400.jpg 2x">
      </picture>
    </div>
  </div>
</div>

Strip Visual #

--strip-visual preset ratio for use with Strip Visual.
Image provided by <picture> element with three different ratios depending screen-size:

  • 767x767px <= 767px
  • 1074x1074px (hidpi) <= 767px
  • 959x587px <= 959px
  • 1343x882px (hidpi) <= 959px
  • 1024x596px <= 1024px
  • 1434x834px (hidpi) <= 1024px
  • 1920x530px > 1024px
  • 2688x742px (hidpi) > 1024px

Note: because of the very large dimensions of the image. We use a HiDPI factor of 1.4.

alt text 
<!-- Rectangular Image (mods: --strip-visual) -->
<div class="vi-rectangular-image vi-rectangular-image--strip-visual"><picture>
    <source media="(max-width:767px)" srcset="/assets/images/static/test-767x767.jpg, /assets/images/static/test-1534x1534.jpg 2x">
    <source media="(max-width:959px)" srcset="/assets/images/static/test-959x587.jpg, /assets/images/static/test-1918x1174.jpg 2x">
    <source media="(max-width:1023px)" srcset="/assets/images/static/test-1024x596.jpg, /assets/images/static/test-2048x1192.jpg 2x">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-1920x530.jpg" srcset="/assets/images/static/test-1920x530.jpg, /assets/images/static/test-3840x1060.jpg 2x">
  </picture></div>

Country Flag #

--country-flag preset ratio and size for showing a standalone country flag.
Image provided by <img> element:

  • 264x150px (hidpi)

The element is displayed at the specific size of 132x75px.

alt text
<!-- Rectangular Image (mods: --country-flag) -->
<div class="vi-rectangular-image vi-rectangular-image--country-flag"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/flags/rect/mx_264x150.png"></div>

Fit #

Use:

  • .vi-rectangular-image--fit
  • .vi-rectangular-image--{breakpoint}-fit

for the rectangular image to fit its parent container. Object fit is applied to the img, with a js fallback for IE11.

breakpoint can be any of the values sm, md, lg xl or xxl

alt text
Without modifier
alt text
With modifier
<!-- container -->
<div style="max-width: 260px; width: 100%; height: 300px; background-color: rgba(0,0,0,.05); border: 1px solid red">
  <!-- Without modifier -->
  <!-- Rectangular Image  -->
  <div class="vi-rectangular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x450.jpg"></div>
</div>
<!-- container -->
<div style="max-width: 260px; width: 100%; height: 300px; background-color: rgba(0,0,0,.05); border: 1px solid red">
  <!-- Without modifier -->
  <!-- Rectangular Image (mods: --fit) -->
  <div class="vi-rectangular-image vi-rectangular-image--fit"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x450.jpg"></div>
</div>

Transparent #

--transparent sets background to transparent.

Use when background is set by a containing element.

Without modifier
With modifier
<!-- container -->
<div style="max-width: 260px; width: 100%; display: inline-block">
  <!-- Without modifier -->
  <!-- Rectangular Image  -->
  <div class="vi-rectangular-image"><img loading="lazy" style="visibility: hidden"></div>
</div>
<!-- container -->
<div style="max-width: 260px; width: 100%; display: inline-block">
  <!-- With modifier -->
  <!-- Rectangular Image (mods: --transparent) -->
  <div class="vi-rectangular-image vi-rectangular-image--transparent"><img loading="lazy" style="visibility: hidden"></div>
</div>

Credits #

The credit line or photo credit identifies the photographer, illustrator, or copyright holder for images.

To show credits for rectangular images add .vi-rectangular-image__credit with the credits after the image or picture tag.

The default placement is the bottom right of the image for left-to-right languages and bottom left for right-to-left languages.

alt text
Image courtesy of the Library of Congress 
<!-- Rectangular Image  -->
<div class="vi-rectangular-image">
  <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x450.jpg">
  <div class="vi-rectangular-image__credit">
    Image courtesy of the Library of Congress
  </div>
</div>

To force the credits into a specific corner, following modifiers are available:

  • --top-start
  • --top-end
  • --bottom-start
  • --bottom-end
alt text
--top-start
alt text
--top-end
alt text
--bottom-start
alt text
--bottom-end 
<!-- container -->
<div style="max-width: 390px; width: 100%; display: inline-block">
  <!-- Rectangular Image  -->
  <div class="vi-rectangular-image">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x450.jpg">
    <div class="vi-rectangular-image__credit vi-rectangular-image__credit--top-start">
      <!-- span not part of credit. -->
      <span dir="ltr">--top-start</span>
    </div>
  </div>
</div>
<!-- container -->
<div style="max-width: 390px; width: 100%; display: inline-block">
  <!-- Rectangular Image  -->
  <div class="vi-rectangular-image">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x450.jpg">
    <div class="vi-rectangular-image__credit vi-rectangular-image__credit--top-end">
      <!-- span not part of credit. -->
      <span dir="ltr">--top-end</span>
    </div>
  </div>
</div>
<!-- container -->
<div style="max-width: 390px; width: 100%; display: inline-block">
  <!-- Rectangular Image  -->
  <div class="vi-rectangular-image">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x450.jpg">
    <div class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-start">
      <!-- span not part of credit. -->
      <span dir="ltr">--bottom-start</span>
    </div>
  </div>
</div>
<!-- container -->
<div style="max-width: 390px; width: 100%; display: inline-block">
  <!-- Rectangular Image  -->
  <div class="vi-rectangular-image">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x450.jpg">
    <div class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-end">
      <!-- span not part of credit. -->
      <span dir="ltr">--bottom-end</span>
    </div>
  </div>
</div>

Icon #

Display predefined icons on top of the image to indicate the kind of content prepresented by a card or strip.

To show the icon, add .vi-rectangular-image__icon and modifier after the image or picture tag.

Following modifiers are available:

  • --video
  • --podcast

The default placement is the bottom left of the image for left-to-right languages and bottom right for right-to-left languages.

More modifiers on request.

alt text
Video
alt text
Podcast 
<div style="max-width: 390px; width: 100%; display: inline-block">
  <!-- Rectangular Image  -->
  <div class="vi-rectangular-image">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x450.jpg">
    <div class="vi-rectangular-image__icon vi-rectangular-image__icon--video">
      <span class="sr-only">Video</span>
    </div>
  </div>
</div>
<div style="max-width: 390px; width: 100%; display: inline-block">
  <!-- Rectangular Image  -->
  <div class="vi-rectangular-image">
    <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x450.jpg">
    <div class="vi-rectangular-image__icon vi-rectangular-image__icon--podcast">
      <span class="sr-only">Podcast</span>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheet is 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.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • 31 Jan 2023. Regression tripple image widths of strip site split.
  • Possible IE11 issue. Object fit called when no image.

Changed

  • 07 Feb 2023 - Wrap --strip-site-split images in picture element to fit cms implementation.
  • Changed credits modifier --top-left to --top-start to better reflect purpose in RTL languages
  • Changed credits modifier --top-right to --top-end to better reflect purpose in RTL languages
  • Changed credits modifier --bottom-left to --bottom-start to better reflect purpose in RTL languages
  • Changed credits modifier --bottom-right to --bottom-end to better reflect purpose in RTL languages

Added

  • 17 Oct 2022 - Added --screen-modal modifier.
  • 13 June 2022 - Add support for custom element <model-viewer>
  • Seperate Strip Visual modifier --strip-visual.
  • Added Icon to overlay the image --podcast.
  • Added Icon to overlay the image --video.
  • Added Strip Hero Navigation modifier --strip-hero-navigation.
  • RTL support (credits)
  • Added credits.
  • Added --hero-image modifier to replace deprecated Figure modifier.
  • Added --video and --custom modifiers.
  • Added draggable="false" attribute.
  • Initial draft