Thumbnail

Pack name: seed-thumbnail

Thumbnail component pack for Seed

Contents

Install

npm install seed-thumbnail --save

Dependencies


Usage

<div class="c-thumbnail">
  <img src="/images/examples/cupcake.jpg" class="c-thumbnail__image">
</div>

Clickable thumbnails

Use the <a> selector for the .c-thumbnail class to create clickable thumbnail links.

<a class="c-thumbnail" href="#">
  <img src="/images/examples/cupcake.jpg" class="c-thumbnail__image">
</a>

Modifiers

Wide

This adjusts the thumbnail to have a 16:9 ratio (which is the default thumbnail ratio). This class supports responsive modifiers.

<div class="c-thumbnail c-thumbnail--wide">
  <img src="/images/examples/cupcake.jpg" class="c-thumbnail__image">
</div>

SD

This adjusts the thumbnail to have a 4:3 ratio. This class supports responsive modifiers.

<div class="c-thumbnail c-thumbnail--sd">
  <img src="/images/examples/cupcake.jpg" class="c-thumbnail__image">
</div>

Square

This adjusts the thumbnail to have a 1:1 ratio. This class supports responsive modifiers.

<div class="c-thumbnail c-thumbnail--square">
  <img src="/images/examples/cupcake.jpg" class="c-thumbnail__image">
</div>

Alignment

Top

<div class="c-thumbnail c-thumbnail--top">
  <img src="/images/examples/cupcake.jpg" class="c-thumbnail__image">
</div>

Middle

<div class="c-thumbnail c-thumbnail--middle">
  <img src="/images/examples/cupcake.jpg" class="c-thumbnail__image">
</div>

Bottom

<div class="c-thumbnail c-thumbnail--bottom">
  <img src="/images/examples/cupcake.jpg" class="c-thumbnail__image">
</div>