• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Thumbnail

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/thumbnail@1.0.0-beta.4

Variants


Thumbnail
Contribution

Rectangular images will fill the entire space.

Woman crouching
Show markup
<div class="spectrum-Thumbnail">
  <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>

Thumbnail (selected)
Contribution

Woman crouching
Show markup
<div class="spectrum-Thumbnail is-selected">
  <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>

Thumbnail (focused)
Contribution

Woman crouching
Show markup
<div class="spectrum-Thumbnail is-focused">
  <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>

Thumbnail (landscape image)
Contribution

Landscape images will fill horizontally and have space above and below.

Landscape with mountains and lake
Show markup
<div class="spectrum-Thumbnail is-focused">
  <img class="spectrum-Thumbnail-image" src="img/example-card-landscape.jpeg" alt="Landscape with mountains and lake">
</div>

Thumbnail (portrait image)
Contribution

Portrait images will fill vertically and have space on either side.

Eiffel Tower at night
Show markup
<div class="spectrum-Thumbnail is-focused">
  <img class="spectrum-Thumbnail-image" src="img/example-card-portrait.jpg" alt="Eiffel Tower at night">
</div>

Thumbnail (background portrait)
Contribution

Portrait images set as the background will fill horizontally

Show markup
<div class="spectrum-Thumbnail">
  <div class="spectrum-Thumbnail-background" style="background-image: url(img/example-card-portrait.jpg)" title="Eiffel Tower at night"></div>
</div>

Thumbnail (background landscape)
Contribution

Portrait images set as the background will fill vertically

Show markup
<div class="spectrum-Thumbnail">
  <div class="spectrum-Thumbnail-background" style="background-image: url(img/example-card-landscape.jpeg)" title="Eiffel Tower at night"></div>
</div>

Thumbnail (image against background)
Contribution

Portrait images set as the background will fill vertically

Woman crouching
Show markup
<div class="spectrum-Thumbnail">
  <div class="spectrum-Thumbnail-background" style="background-color: orange"></div>
  <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>

Thumbnail (S)
Contribution

Woman crouching
Show markup
<div class="spectrum-Thumbnail spectrum-Thumbnail--S">
  <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>

Thumbnail (M, default)
Contribution

Woman crouching
Show markup
<div class="spectrum-Thumbnail spectrum-Thumbnail--M">
  <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>

Thumbnail (L)
Contribution

Woman crouching
Show markup
<div class="spectrum-Thumbnail spectrum-Thumbnail--L">
  <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>

Thumbnail (XL)
Contribution

Woman crouching
Show markup
<div class="spectrum-Thumbnail spectrum-Thumbnail--XL">
  <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>

Thumbnail (XXL)
Contribution

Woman crouching
Show markup
<div class="spectrum-Thumbnail spectrum-Thumbnail--XXL">
  <img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>