Thumbnail
Overview
Use the .bsk-thumbnail classes to highlight one or more media items, such as images, that are distinct from main
content, but which is shown within it, usually as a grid of items.
You must pick a variant
for each thumbnail, otherwise it will look strange. It is not enough to use .bsk-thumbnail on its own.
Thumbnails are really only intended for media items. For more general purposes, use Panel’s.
Supported elements
These elements are fully supported:
<div><a>
Variants
Default thumbnail
Add the .bsk-thumbnail-default class for standard thumbnails.
<div class="bsk-row">
<div class="bsk-col-12-md-6">
<div class="bsk-thumbnail bsk-thumbnail-default">
<img src="/img/placeholder-256.png" alt="thumbnail">
</div>
</div>
<div class="bsk-col-12-md-6">
<a href="#" class="bsk-thumbnail bsk-thumbnail-default">
<img src="/img/placeholder-256.png" alt="thumbnail">
</a>
</div>
</div>Inverse thumbnail
Add the .bsk-thumbnail-inverse class for an alternative thumbnail style. This has no semantic significance.
<div class="bsk-row">
<div class="bsk-col-12-md-6">
<div class="bsk-thumbnail bsk-thumbnail-inverse">
<img src="/img/placeholder-256.png" alt="thumbnail">
</div>
</div>
<div class="bsk-col-12-md-6">
<a href="#" class="bsk-thumbnail bsk-thumbnail-inverse">
<img src="/img/placeholder-256.png" alt="thumbnail">
</a>
</div>
</div>Components
Caption
Use the .bsk-caption class on an element within a thumbnail to add additional information, such as a description.
<div class="bsk-thumbnail bsk-thumbnail-default">
<img src="/img/placeholder-800-600.png" alt="thumbnail">
<div class="bsk-caption">Thumbnail caption</div>
</div>If using the inverted variant, the caption will be styled accordingly.
<div class="bsk-thumbnail bsk-thumbnail-inverse">
<img src="/img/placeholder-800-600.png" alt="thumbnail">
<div class="bsk-caption">Thumbnail caption</div>
</div>Captions can also include more complex markup.
<div class="bsk-thumbnail bsk-thumbnail-default">
<img src="/img/placeholder-800-600.png" alt="thumbnail">
<div class="bsk-caption">
<h3>Thumbnail caption heading</h3>
<p>Thumbnail caption description</p>
<a href="#" class="bsk-btn bsk-btn-primary" role="button">Thumbnail caption action</a>
</div>
</div>