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

Circular Image

v0.0.0

The Circular Image component shows circular images and prevent unwanted reflow* by using an intrinsic ratio of 1:1 that scales on any device.

By default the Circular 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.

Rivka Johnston
no reflow
alt text
no reflow
<!-- container -->
<div style="max-width: 260px; width: 100%; display: inline-block">
  <div class="vi-circular-image"><img alt="Rivka Johnston" loading="lazy" src="/assets/images/profiles/personal/profile001.jpg"></div>
</div>
<!-- container -->
<div style="max-width: 260px; width: 100%; display: inline-block">
  <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
</div>

Link #

The Circular Image component can also be a link.

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

Picture #

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

alt text 
<!-- container -->
<div style="max-width: 260px;">
  <div class="vi-circular-image"><picture>
      <source media="(max-width:767px)" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x">
      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-900x900.jpg" srcset="/assets/images/static/test-900x900.jpg, /assets/images/static/test-1800x1800.jpg 2x">
    </picture></div>
</div>

Modifiers #

The following modifiers are available:

  • --size-article-meta 80x80px preset size for use with Article Meta Data.
  • --size-product-card max-width: 140px preset size for showing product images on card.
  • --size-product max-width: 240px preset size for showing product images.
Courtney Ondricka
alt text
alt text
<div class="vi-circular-image vi-circular-image--size-article-meta"><img alt="Courtney Ondricka" loading="lazy" src="/assets/images/profiles/personal/profile004.jpg"></div>
<div class="vi-circular-image vi-circular-image--size-product-card"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-480x480.jpg"></div>
<div class="vi-circular-image vi-circular-image--size-product"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-480x480.jpg"></div>

--white sets background to white.

Without modifier
With modifier
<div style="max-width: 260px; width: 100%; display: inline-block">
  <!-- Without modifier -->
  <div class="vi-circular-image"><img loading="lazy" style="visibility: hidden"></div>
</div>
<!-- container -->
<div style="max-width: 260px; width: 100%; display: inline-block">
  <!-- With modifier -->
  <div class="vi-circular-image vi-circular-image--white"><img loading="lazy" style="visibility: hidden"></div>
</div>

--transparent sets background to transparent.

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

Stylesheets #

The following stylesheet is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Added

  • 13 Jun 2024 - Added modifier for white background behind images
  • Added modifier --size-product-card
  • Added draggable="false" attribute.
  • Initial draft