New This website is new, your feedback will help us to improve it.

Thumbnail

Overview

Use the .bsk-image-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.

Supported elements

These elements are fully supported:

  • <div>
  • <a>

Variants

Default thumbnail

Thumbnail image 
<div class="bsk-image-thumbnail">
  <img src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-150.png" alt="Thumbnail image">
</div>

Inverse thumbnail

If necessary apply a darker background colour to the parent class to create an inverse effect

Thumbnail image 
<div class="bsk-image-thumbnail bg-gray-800 w-full p-2">
  <img src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-150.png" alt="Thumbnail image">
</div>

Components

Caption

Thumbnail image

Caption

<div class="bsk-image-thumbnail">
  <img src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-150.png" alt="Thumbnail image">
  <p class="bsk-image-thumbnail-caption">Caption</p>
</div>

Thumbnail caption heading

Thumbnail image

Caption heading

Caption

Caption action 
<div class="bsk-image-thumbnail">
  <img src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-300.png" alt="Thumbnail image">
  <div class="bsk-image-caption">
      <h4>Caption heading</h4>
      <p>Caption</p>
      <a href="#" class="bsk-btn bsk-btn-primary" role="button">Caption action</a>
  </div>
</div>