Skip to main content

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.

thumbnail
Thumbnail caption
<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.

thumbnail
Thumbnail caption
<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.

thumbnail

Thumbnail caption heading

Thumbnail caption description

Thumbnail caption action
<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>