Thumbnails

The thumbnail single is useful for components that represent profile images, icons, previews and etc. Not to be confused with the image single component, thumbnails have set sizes and act as a container.

<span class="s-thumb -large">
  <img src="/assets/img/logo.png">
</span>

Sizes

Thumbnails have 3 sizes.

<span class="s-thumb -small">
  <img src="/assets/img/logo.png">
</span>
<span class="s-thumb ">
  <img src="/assets/img/logo.png">
</span>
<span class="s-thumb -large">
  <img src="/assets/img/logo.png">
</span>

Shapes

By default the thumbnail single applies a border radius to the child image but this can be overwritten to apply various shapes

<span class="s-thumb -large -sharp">
  <img src="/assets/img/logo.png">
</span>
<span class="s-thumb -large -round">
  <img src="/assets/img/logo.png">
</span>