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

Rectangular Image Sticker

v0.0.0

Articles sometimes have an extra text label or a graphic mark. The Rectangular Image of the corresponding card and the image of the article should have that same mark. For this use the Rectangular Image Sticker Component.

Placing a sticker in a separate html element and not as part of the image optimises legibility, readability and appearance.

To support all possible designs, stickers can contain text or an image.

Using text is preferred, as it results in better readability, accessibility and SEO. However, when the visual design is crucial, it is possible to use an image. Make sure the background of the image is transparent or circular.

To show the Rectangular Image Sticker, add it after the image or picture tag inside a Rectangular Image. See source for full structure.

alt text
Food truck
park mi
alt text
Food truck
park mi
alt text
alt text 
<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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              park mi
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              <strong>park</strong>
              <em>mi</em>
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              <img src="/assets/images/labels/generic/logo-meet-the-expert.svg" width="90" alt="">
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              <img src="/assets/images/labels/generic/logo-globe.svg" width="80" alt="">
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>

Alignment #

The stickers can be left or right aligned (in relation to the image, not reading direction).

To align the stickers, following modifiers are available for .vi-rectangular-image-sticker__main:

  • --left
  • --right

To align the text inside the sticker, please use the Bootstrap utility classes like .text-right and .text-left

alt text
Food truck
park mi
alt text
text alignment with .text-right
alt text
Aligned
right 
<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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              park mi
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--right">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              <img src="/assets/images/labels/generic/logo-globe.svg" width="80" alt="">
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </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">
    <!-- Rectangular Image Sticker  -->
    <div class="text-right vi-rectangular-image-sticker">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Aligned<br>
              right
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>

Width #

A longer text or a larger image results in a larger circle.

The <br> must be used for multiline texts.

alt text
Word
alt text
Locavore beard
yolo vinyl fixie.
Kale chips chia.
alt text
alt text 
<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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Word
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--right">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Locavore beard <br>
              yolo vinyl fixie. <br>
              Kale chips chia.
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              <img src="/assets/images/labels/generic/logo-meet-the-expert.svg" width="50" alt="">
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--right">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              <img src="/assets/images/labels/generic/logo-meet-the-expert.svg" width="130" alt="">
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>

Presets #

In cards (and some strips), the space from the left/right of text and image to te image border corresponds to space between the cards text and left/right border of the card.

This is accomplished by using the preset modifiers (corresponding to the Rectangular Image modifiers):

  • --card-classic
  • --card-story
  • --strip-classic
  • --strip-epic
  • --strip-hero
  • --strip-hero-navigation
--card-classic
alt text
Food truck
park mi
--card-story
alt text
Food truck
park mi
--strip-classic
alt text
Food truck
park mi
--strip-epic
alt text
Food truck
park mi
--strip-hero
alt text
Food truck
park mi
--strip-hero-navigation
alt text
Food truck
park mi 
<div style="max-width: 390px; width: 100%; display: inline-block">
  <!-- 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>
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--card-classic">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              <strong>park</strong>
              <em>mi</em>
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="max-width: 390px; width: 100%; display: inline-block">
  <!-- 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>
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--card-story">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              <strong>park</strong>
              <em>mi</em>
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="max-width: 450px; width: 100%; display: inline-block">
  <!-- Rectangular Image (mods: --strip-classic, --) -->
  <div class="vi-rectangular-image vi-rectangular-image--strip-classic vi-rectangular-image--">
    <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>
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--strip-classic">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              <strong>park</strong>
              <em>mi</em>
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="max-width: 450px; width: 100%; display: inline-block">
  <!-- Rectangular Image (mods: --strip-epic, --) -->
  <div class="vi-rectangular-image vi-rectangular-image--strip-epic vi-rectangular-image--">
    <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>
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--strip-epic">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              <strong>park</strong>
              <em>mi</em>
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="max-width: 450px; width: 100%; display: inline-block">
  <!-- Rectangular Image (mods: --strip-hero, --) -->
  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--">
    <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>
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--strip-hero">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              <strong>park</strong>
              <em>mi</em>
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="max-width: 450px; width: 100%; display: inline-block">
  <!-- Rectangular Image (mods: --strip-hero-navigation, --) -->
  <div class="vi-rectangular-image vi-rectangular-image--strip-hero-navigation vi-rectangular-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-734x510.jpg" srcset="/assets/images/static/test-734x510.jpg, /assets/images/static/test-1468x1020.jpg 2x">
    </picture>
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--strip-hero-navigation">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              <strong>park</strong>
              <em>mi</em>
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>

Hero images have a different alignment.

Use the preset ratio modifier (corresponding to the Rectangular Image modifier):

  • --hero-image
--hero-image
alt text
© 2017 House of Clip Art
Food truck
park mi
alt text
Image courtesy of the Library of Congress
Food truck
park mi 
<!-- 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 class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-end">
    © 2017 House of Clip Art
  </div>
  <!-- Rectangular Image Sticker  -->
  <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--hero-image">
    <div class="vi-rectangular-image-sticker__wrap">
      <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
        <div class="vi-rectangular-image-sticker__main-wrap">
          <div class="vi-rectangular-image-sticker__content">
            Food truck<br>
            <strong>park</strong>
            <em>mi</em>
          </div>
          <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
        </div>
      </div>
      <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
        <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
      </div>
    </div>
  </div>
</div>
<!-- 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 class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-end">
    Image courtesy of the Library of Congress
  </div>
  <!-- Rectangular Image Sticker  -->
  <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--hero-image">
    <div class="vi-rectangular-image-sticker__wrap">
      <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--right">
        <div class="vi-rectangular-image-sticker__main-wrap">
          <div class="vi-rectangular-image-sticker__content">
            Food truck<br>
            <strong>park</strong>
            <em>mi</em>
          </div>
          <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
        </div>
      </div>
      <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
        <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
      </div>
    </div>
  </div>
</div>

Second Circle #

To show dororative second circle add modifier --second-circle

-second-circle
alt text
Food truck
park mi
--card-classic with --second-circle
alt text
Food truck
park mi
--card-story with --second-circle
alt text
Food truck
park mi
--strip-classic with --second-circle
alt text
Food truck
park mi
--strip-epic with --second-circle
alt text
Food truck
park mi
--strip-hero with --second-circle
alt text
Food truck
park mi
--strip-hero-navigation with --second-circle
alt text
Food truck
park mi
--hero-image with --second-circle
alt text
© 2017 House of Clip Art
Food truck
Sticky signify
park mi 
<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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--second-circle">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              park mi
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="max-width: 390px; width: 100%; display: inline-block">
  <!-- 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>
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--card-classic vi-rectangular-image-sticker--second-circle">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              <strong>park</strong>
              <em>mi</em>
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="max-width: 390px; width: 100%; display: inline-block">
  <!-- 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>
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--card-story vi-rectangular-image-sticker--second-circle">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              <strong>park</strong>
              <em>mi</em>
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="max-width: 450px; width: 100%; display: inline-block">
  <!-- Rectangular Image (mods: --strip-classic, --) -->
  <div class="vi-rectangular-image vi-rectangular-image--strip-classic vi-rectangular-image--">
    <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>
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--strip-classic vi-rectangular-image-sticker--second-circle">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              <strong>park</strong>
              <em>mi</em>
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="max-width: 450px; width: 100%; display: inline-block">
  <!-- Rectangular Image (mods: --strip-epic, --) -->
  <div class="vi-rectangular-image vi-rectangular-image--strip-epic vi-rectangular-image--">
    <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>
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--strip-epic vi-rectangular-image-sticker--second-circle">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              <strong>park</strong>
              <em>mi</em>
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="max-width: 450px; width: 100%; display: inline-block">
  <!-- Rectangular Image (mods: --strip-hero, --) -->
  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--">
    <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>
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--strip-hero vi-rectangular-image-sticker--second-circle">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              <strong>park</strong>
              <em>mi</em>
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="max-width: 450px; width: 100%; display: inline-block">
  <!-- Rectangular Image (mods: --strip-hero-navigation, --) -->
  <div class="vi-rectangular-image vi-rectangular-image--strip-hero-navigation vi-rectangular-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-734x510.jpg" srcset="/assets/images/static/test-734x510.jpg, /assets/images/static/test-1468x1020.jpg 2x">
    </picture>
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--strip-hero-navigation vi-rectangular-image-sticker--second-circle">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Food truck<br>
              <strong>park</strong>
              <em>mi</em>
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 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 class="vi-rectangular-image__credit vi-rectangular-image__credit--bottom-end">
    © 2017 House of Clip Art
  </div>
  <!-- Rectangular Image Sticker  -->
  <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--hero-image vi-rectangular-image-sticker--second-circle">
    <div class="vi-rectangular-image-sticker__wrap">
      <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
        <div class="vi-rectangular-image-sticker__main-wrap">
          <div class="vi-rectangular-image-sticker__content">
            Food truck<br>
            Sticky signify<br>
            <strong>park</strong>
            <em>mi</em>
          </div>
          <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
        </div>
      </div>
      <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
        <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
      </div>
    </div>
  </div>
</div>

Styles #

The circles can use the standard fills, patterns, and gradients.

If the background of the card/strip uses a pattern or a gradient, a solid filled circle should be used.

default (--style-flat-1)
alt text
Three lines
on top of
each other
--style-flat-2
alt text
Three lines
on top of
each other
--style-inversed
alt text
Three lines
on top of
each other 
<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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--style-flat-1 vi-rectangular-image-sticker--second-circle">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Three lines<br>
              on top of<br>
              each other
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--style-flat-2 vi-rectangular-image-sticker--second-circle">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Three lines<br>
              on top of<br>
              each other
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--style-inversed vi-rectangular-image-sticker--second-circle">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Three lines<br>
              on top of<br>
              each other
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>

If the background of the card/strip is solid green without a pattern, a gradient or Pattern should be used for the circles.

--style-gradient-1
alt text
Three lines
on top of
each other
--style-gradient-2
alt text
Three lines
on top of
each other
--style-gradient-3
alt text
Three lines
on top of
each other 
<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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--style-gradient-1 vi-rectangular-image-sticker--second-circle">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Three lines<br>
              on top of<br>
              each other
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--style-gradient-2 vi-rectangular-image-sticker--second-circle">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Three lines<br>
              on top of<br>
              each other
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--style-gradient-3 vi-rectangular-image-sticker--second-circle">
      <div class="vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Three lines<br>
              on top of<br>
              each other
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </div>
  </div>
</div>

To use the Pattern add .vi-pattern and .vi-pattern--random-primary-pattern to the element with class .vi-rectangular-image-sticker__wrap

.vi-pattern and .vi-pattern--random-primary-pattern
alt text
Three lines
on top of
each other
.vi-pattern and .vi-pattern--random-primary-pattern
alt text
Three lines
on top of
each other 
<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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--style-pattern vi-rectangular-image-sticker--second-circle">
      <div class="vi-pattern vi-pattern--random-primary-pattern vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Three lines<br>
              on top of<br>
              each other
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </div>
      </div>
    </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">
    <!-- Rectangular Image Sticker  -->
    <div class="vi-rectangular-image-sticker vi-rectangular-image-sticker--style-pattern vi-rectangular-image-sticker--second-circle">
      <div class="vi-pattern vi-pattern--random-primary-pattern vi-rectangular-image-sticker__wrap">
        <div class="vi-rectangular-image-sticker__main vi-rectangular-image-sticker__main--left">
          <div class="vi-rectangular-image-sticker__main-wrap">
            <div class="vi-rectangular-image-sticker__content">
              Three lines<br>
              on top of<br>
              each other
            </div>
            <div aria-hidden="true" class="vi-rectangular-image-sticker__background"></div>
          </div>
        </div>
        <div aria-hidden="true" class="vi-rectangular-image-sticker__decoration">
          <svg class="vi-rectangular-image-sticker__aspect-ratio" viewbox="0 0 100 100"></svg>
        </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.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • 11 Aug 2023 - Fixed background being overitten when in combined styles.
  • Second circle --hero-image shifts to gpu layer. HTML CHANGE REQUIRED: Element with class .vi-rectangular-image-sticker__main-wrap added.
  • Safari Flicker when used in card. HTML CHANGE REQUIRED: Element with class .vi-rectangular-image-sticker__wrap added. Because Safari.

Added

  • PBS support stickers
  • Initial draft