- Lightest
- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
Thumbnail
| Component status | Contribution |
|---|---|
| Last released | Unreleased |
| Current version | @spectrum-css/thumbnail@1.0.3-alpha.1 |
Variants
ThumbnailContribution
Rectangular images will fill the entire space.
Show markup
<div class="spectrum-Thumbnail">
<img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>
Thumbnail (selected)Contribution
Show markup
<div class="spectrum-Thumbnail is-selected">
<img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>
Thumbnail (focused)Contribution
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.
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.
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
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
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
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
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
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
Show markup
<div class="spectrum-Thumbnail spectrum-Thumbnail--XXL">
<img class="spectrum-Thumbnail-image" src="img/thumbnail.png" alt="Woman crouching">
</div>