Thumbnail

This simple pattern displays a thumbnail image, such as for a product. Works well for images with transparent backgrounds. The image grows slightly on larger screens. It can optionally be a link, and can optionally display a badge.

Default 

<div class="Thumbnail ">
  <img
    alt=""
    class="Thumbnail-image "
    src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2220%22%20dy%3D%228%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EThumb%3C%2Ftext%3E%3C%2Fsvg%3E"
  >
</div>

Link 

<a href="https://example.com"
  class="Thumbnail Thumbnail--link ">
  <img
    alt=""
    class="Thumbnail-image "
    src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2220%22%20dy%3D%228%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EThumb%3C%2Ftext%3E%3C%2Fsvg%3E"
  >
</a>

Badge

3 
<a href="https://example.com"
  class="Thumbnail Thumbnail--link Thumbnail--badge ">
  <img
    alt=""
    class="Thumbnail-image "
    src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2220%22%20dy%3D%228%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EThumb%3C%2Ftext%3E%3C%2Fsvg%3E"
  >
    <span class="Thumbnail-badge ">
      <span class="Thumbnail-badgeContent">3</span>
    </span>
</a>