Files

• _thumbnails.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/thumbnails

Module Overview

Examples

Portfolio/Article Thumbnails

<div class="thumbnail">
    <div class="thumbnail_mask">
        <div class="thumbnail_controls">
            <a rel="lightbox" href="../../../images/demo/stock-3.jpg" class="button-icon-border-circle">
                <i class="fa fa-search"></i>
            </a>
        </div>
    </div>
    <img src="../../../images/demo/stock-3.jpg">
</div>

---

<div class="thumbnail-zoom">
    <div class="thumbnail_mask">
        ...
    </div>
    <img src="../../../images/demo/stock-6.jpg">
</div>

---

<div class="thumbnail">
    <div class="thumbnail_mask">
        <div class="thumbnail_controls-corner button_group-small">
            <a rel="lightbox" href="../../../images/demo/stock-9.jpg" class="button-icon-border-circle">
                <i class="fa fa-search"></i>
            </a>
            <a href="#" class="button-icon-border-circle">
                <i class="fa fa-link"></i>
            </a>
        </div>
        <header class="thumbnail_title heading_group">
            <h4 class="heading-heavy-size-4 font-2">Lorem Ipsum</h4>
            <h5 class="heading-light">Cras dictum erat id tortor ornare.</h5>
        </header>
    </div>
    <img src="../../../images/demo/stock-9.jpg">
</div>

---

<div class="thumbnail-feature">
    <img src="../../../images/demo/stock-12.jpg">
    <div class="thumbnail_content">
        <header class="heading_group-small">
            <div class="heading_date">
                <div>Sep</div>
                <div>23</div>
            </div>
            <h3 class="heading-heavy-size-4">Kayzen is Released</h3>
        </header>
        <div class="thumbnail_excerpt">Quisque fermentum nisl metus...</div>
    </div>
</div>

Thumbnail Grid

<div class="thumbnail_grid-fade row-magic">
    <img class="span active" src="../../../images/demo/stock-3.jpg">
    <img class="span" src="../../../images/demo/stock-6.jpg">
    <img class="span" src="../../../images/demo/stock-9.jpg">
    <img class="span" src="../../../images/demo/stock-12.jpg">
    <img class="span" src="../../../images/demo/stock-15.jpg">
</div>  

Profile Picture Thumbnails

Profile picture thumbnails are fixed sizes.

Extra Small

<div class="thumbnail-profile-xsmall">
    <img src="../../../images/team/team-2.jpg">
</div>

Small

<div class="thumbnail-profile-small">
    <img src="../../../images/team/team-2.jpg">
</div>

Default

<div class="thumbnail-profile">
    <img src="../../../images/team/team-2.jpg">
</div>

Large

<div class="thumbnail-profile-large">
    <img src="../../../images/team/team-2.jpg">
</div>

Extra Large

<div class="thumbnail-profile-xlarge">
    <img src="../../../images/team/team-2.jpg">
</div>

Round

<div class="thumbnail-profile-round">
    <img src="../../../images/team/team-2.jpg">
</div>

Styled

<div class="thumbnail-profile-styled">
    <img src="../../../images/team/team-2.jpg">
</div>

Badge

<div class="thumbnail-profile-badge">
    <img src="../../../images/team/team-2.jpg">
</div>

Combining

<div class="thumbnail-large-round-profile-badge">
    <img src="../../../images/team/team-2.jpg">
</div>

Customizing

The thumbnails can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
default-profile-size	50px	The default sze for profile picture thumbnails.
xsmall-profile-size	24px	The size for xsmall profile thumbnails.
small-profile-size	44px	The size for small profile thumbnails.
large-profile-size	65px	The size for large profile thumbnails.
xlarge-profile-size	95px	The size for xlarge profile thumbnails.
mask-background	rgba(black, 0.6)	The background for thumbnail masks.
mask-title-color	color('greyscale', 'white')	The title color for thumbnail masks.
mask-border-color	color('brand', 'primary')	The color of the inner mask outline.
featureContent-background	rgba(black, 0.5)	The background for the content overlay of featured thumbnails.
featureContent-color	color('greyscale', 'white')	The text color for the content overlay of featured thumbnails.
featureContent-padding	1.5em	The padding for the content overlay of featured thumbnails.
featureContent-heading-color	color('greyscale', 'white')	The color for the heading of featured thumbnail overlays.

To change one of the above values, pass your new value(s) to the thumbnails() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include thumbnails((
    'xlarge-profile-size'  : 150px,
    'mask-background'      : rgba(#9B58B5, 0.6),
    'mask-border-color'    : white
));