Thumbnail
A component that stylizes images for use as thumbnails. This component provides various thumbnail styles and sizes.
Install
npm install seed-thumbnail --save
Dependencies
Example
<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>Sizes
These modifier classes adjust the ratio of the thumbnail. These classes support responsive modifiers.
| Modifier class | Ratio | Example |
|---|---|---|
| Default | 16:9 | 1920x1080 |
.c-thumbnail--wide |
16:9 | 1920x1080 |
.c-thumbnail--sd |
4:3 | 800x600 |
.c-thumbnail--square |
1:1 | 400x400 |
<div class="c-thumbnail c-thumbnail--sd">
<img src="/images/examples/cupcake.jpg" class="c-thumbnail__image">
</div>Alignment
These modifier classes adjust the image position within the thumbnail. These classes support responsive modifiers.
| Modifier class | Alignment |
|---|---|
.c-thumbnail--top |
Top |
.c-thumbnail--center |
Middle (Defaut) |
.c-thumbnail--bottom |
Bottom |
<div class="c-thumbnail c-thumbnail--top">
<img src="/images/examples/cupcake.jpg" class="c-thumbnail__image">
</div>Configurations
Below are the default Sass configuration variables for seed-thumbnail. The variables can be found in the pack’s _config.scss file.
seed-thumbnail/_config.scss// Namespaces
$seed-thumbnail-namespace: "c-thumbnail" !default;
$seed-thumbnail-image-namespace: "#{$seed-thumbnail-namespace}__image" !default;
// Config
// Borders
$seed-thumbnail-border-radius: 0 !default;
$seed-thumbnail-border-radius-rounded: 4px !default;
// Colors
$seed-thumbnail-background-color: #eee !default;
// Alignment
$seed-thumbnail-alignments: (
top: (
top: 0,
bottom: inherit
),
center: (
top: -100%,
bottom: -100%,
),
bottom: (
top: inherit,
bottom: 0
)
) !default;
// Sizes
// Pass in ratios for w:h
$seed-thumbnail-sizes: (
wide: (
width: 16,
height: 9
),
sd: (
width: 4,
height: 3
),
square: (
width: 1,
height: 1
)
) !default;