Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/image-placeholder

DS v1

Image placeholder should be used when an image is not present. By default this is 300x300px, but can be resized to it a container.

This asset can be found either in dist/svg/icons/image-placeholder.svg or in the icons bundle

Variable widths with borders

<svg aria-label="image not found" class="image-placeholder">
  <use href="#image-placeholder" />
</svg>

<div
  style="
    border: 1px solid var(--color-stroke-information);
    height: 50px;
    width: 50px;
  "
>
  <svg aria-label="image not found" class="image-placeholder" role="img">
    <use href="#image-placeholder" />
  </svg>
</div>
<svg
  aria-label="image not found"
  class="image-placeholder"
  style="
    border: 1px solid var(--color-stroke-attention);
    height: 150px;
    width: 10px;
  "
  role="img"
>
  <use href="#image-placeholder" />
</svg>
<svg
  aria-label="image not found"
  class="image-placeholder"
  style="
    border: 1px dotted var(--color-stroke-attention);
    height: 250px;
    width: 250px;
  "
  role="img"
>
  <use href="#image-placeholder" />
</svg>