Kayzen

- Shopping Cart
- Nexus
  
  $9.95
- Nexus
  
  $24.95
- $34.90
  
  View Cart
USD
- GBP
- USD
- EUR
- JPY
- RUB

Widgets/Cards

assets/modules/elements/widgets

Files

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

Module Overview

Unlike most other elements, widgets are used heavily throughout this theme to help style and structure many of its visual aspets. Whilst there is a large number of components and modifiers for this module, only certain combinations of these are used, as seen in the below examples.

Name: widget
Components: lid, sticker, group, icon, header, controls
Modifiers: block[small, fill, noHover], panel[small], borderTop[highlight], borderLeft[highlight], card, stacked, scale, zoom, media, spectrumQuarter[1, 2, 3, 4], feature, greyscale, article

Examples

<div class="widget_group row text-center">
    
    <div class="widget span-4">
        <div class="widget_icon button-icon-plain-size-8">
            <i class="fa fa-desktop"></i>
        </div>
        <header class="widget_header heading_group">
            <h3 class="heading-heavy-size-4">100% Responsive</h3>
            <h4 class="heading-light-uppercase-brand-1">Donec finibus fringer</h4>
        </header>
        <p>...</p>
    </div>
    
    ...
    
</div>

<div class="row text-center">

    <div class="widget span-4">                     
        <div class="widget_icon-inline button-icon-plain-size-6">
            <i class="fa fa-star"></i>
        </div>  
        <header class="widget_header-inline heading_group">
            <h3 class="heading-heavy-uppercase">Fast Performance</h3>
            <h4 class="heading-light-uppercase-brand-1-size-2">Donec finibus fringer</h4>
        </header>     
        <p>...</p>
    </div>
    
    ...
    
</div>

<div class="widget_group">
    
    <div class="widget-stacked">                         
        <div class="widget_icon-inline button-icon-plain-size-7">
            <i class="fa fa-bar-chart"></i>
        </div> 
        <header class="widget_header-inline heading_group">
            <h3 class="heading-heavy-size-4">Fast Performance</h3>
            <h4 class="heading-light-uppercase-brand-1">Donec finibus fringer</h4>
        </header>  
        <p>...</p>
    </div>
    
    ...
    
</div>

<div class="widget_group-grid row-flow">
    
    <a class="widget-block-borderLeft span-4" href="#">
        <div class="widget_icon-inline button-icon-plain-size-6">
            <i class="fa fa-tablet"></i>
        </div>
        <header class="widget_header-inline heading_group">
            <h3 class="heading">Mobile Optimized</h3>
            <h4 class="heading-light-uppercase-brand-1-size-1">Perfect On Any Device</h4>
        </header>
    </a>
    
    ...
    
</div>

<div class="widget_group row text-center">
    
    <a class="widget-block-borderTop-scale span-3" href="#">
        <div class="widget_icon button-icon-plain-size-8">
            <i class="fa fa-rocket"></i>
        </div>
        <header class="widget_header heading_group">
            <h4 class="heading-light-uppercase-brand-1">Deploy</h4>
        </header>
    </a>
    
    ...
    
</div>

<div class="widget_group row text-center">
 
    <div class="widget-borderTop-highlight-block-scale span-4">
        <div class="widget_icon button-icon-plain-size-8">
            <i class="fa fa-photo"></i>
        </div>
        <header class="widget_header heading_group">
            <h3 class="heading-heavy-size-4">Retina Ready</h3>
            <h4 class="heading-light-uppercase-brand-1">Donec finibus fringer</h4>
        </header>
        <p>...</p>
    </div>
    
    ...
    
</div>

<div class="row text-center">

    <div class="widget-card span-4">
        <div class="thumbnail">
            <img src="../../../images/wallpapers/bg-7.jpg">
        </div>
        <div class="widget_content">
            <header class="heading_group">
                <h3 class="heading-heavy-size-3">Leather Jackets</h3>
                <h4 class="heading-light-uppercase-brand-1-size-2">Donec finibus fringer</h4>
            </header>
        </div>
    </div>
    
    ...
    
</div>

Sep

Lorem ipsum dolor

Posted in HTML Themes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit lectus ex, id feugiat felis consequat id...

John Doe

Sep

Lorem ipsum dolor

Posted in HTML Themes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit lectus ex, id feugiat felis consequat id...

John Doe

Sep

Lorem ipsum dolor

Posted in HTML Themes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit lectus ex, id feugiat felis consequat id...

John Doe

<div class="row-flow">

    <article class="widget-article span-4">
        <div class="thumbnail">
            <div class="thumbnail_mask">
                <div class="thumbnail_controls button_group-small">
                    <a href="../../../images/wallpapers/bg-7.jpg" class="button-icon-border-circle" rel="lightbox">
                        <i class="fa fa-search"></i>
                    </a>
                    <a href="#" class="button-icon-border-circle">
                        <i class="fa fa-link"></i>
                    </a>
                </div>
            </div>
            <img src="../../../app/images/wallpapers/bg-7.jpg">
        </div>
        <header class="heading_group">
            <div class="heading_date">
                <div>Sep</div>
                <div>23</div>
            </div>
            <h2 class="heading-heavy-size-4 font-2">Lorem ipsum dolor</h2>
            <h3 class="heading-light-size-2">Posted in <a href="#">HTML Themes</a></h3>
        </header>
        <p class="blurb">...</p>
        <small>
            <div class="row-block">
                <div class="span va-middle">
                    <ul class="list-reset-inline">
                        <li><i class="fa fa-user"></i> <a href="#">John Doe</a></li>
                    </ul>
                </div>
                <div class="span va-middle text-right">
                    <a href="#" class="button-primary">Read More</a>
                </div>
            </div>
        </small>    
    </article>
    
    ...
    
</div>

<div class="row-block text-center">

    <a class="widget-tub span bg-facebook" href="#">
        <div class="widget_lid">
            <div class="widget_sticker button-icon-plain-size-6">
                <i class="fa fa-facebook"></i>
            </div>
        </div>
        <div class="widget_content">
            <header class="heading_group">
                <h3 class="heading-size-5">18.2k</h3>
                <h3 class="heading-size-2-light-uppercase">Likes</h3>
            </header>
        </div>
        <div class="button-block relative font-2">Facebook</div>
    </a>
    
    ...
    
</div>

<div class="relative">
    <div class="row-no-gutter">
        <a
            href="#" 
            class="widget-feature-zoom span-4"
            data-bg="../../../images/wallpapers/bg-6.jpg"
        >
            <div class="corner-ribbon-pink" data-ribbon="Hot"></div>
            <header class="widget_header heading_group">
                <h4 class="heading-heavy-uppercase-size-4 font-2">Lorem Ipsum</h4>
                <h5 class="heading-light">Dolor Sit Amet</h4>
            </header>
        </a>
        <a 
            href="#" 
            class="widget-feature-zoom span-4"
            data-bg="../../../images/wallpapers/bg-3.jpg"
        >
            <div class="corner-ribbon-green" data-ribbon="New"></div>
            <header class="widget_header heading_group">
                <h4 class="heading-heavy-uppercase-size-4 font-2">Lorem Ipsum</h4>
                <h5 class="heading-light">Dolor Sit Amet</h4>
            </header>
        </a>
        <a
            href="#"  
            class="widget-feature-zoom span-4 col-full"
            data-bg="../../../images/wallpapers/bg-4.jpg"
        >
            <header class="widget_header heading_group">
                <h4 class="heading-heavy-uppercase-size-4 font-2">Lorem Ipsum</h4>
                <h5 class="heading-light">Dolor Sit Amet</h4>
            </header>
        </a>
    </div>
    <div class="row-no-gutter">
        <a 
            href="#" 
            class="widget-feature-zoom span-8"
            data-bg="../../../images/wallpapers/bg-5.jpg"
        >
            <header class="widget_header heading_group">
                <h4 class="heading-heavy-uppercase-size-4 font-2">Lorem Ipsum</h4>
                <h5 class="heading-light">Dolor Sit Amet</h4>
            </header>
        </a>
    </div>
</div>

Full-Screen Examples

<div class="widget_group row-block text-center">

    <div class="widget-block-panel span">
        <div class="widget_icon button-icon-plain-size-8">
            <i class="fa fa-eyedropper"></i>
        </div>
        <header class="widget_header heading_group">
            <h3 class="heading-heavy-size-4">Unlimited Colors</h3>
            <h4 class="heading-light-uppercase-brand-1">Have any color you want</h4>
        </header>
        <p>...</p>
    </div>
    
    ...
    
</div>

<div class="widget_group-center row-no-gutter">

    <a class="widget-block-panel-small span-2" href="#">
        <div class="widget_icon button-icon-plain-size-8">
            <i class="fa fa-th-list"></i>
        </div>
        <header class="widget_header heading_group">
            <h3 class="heading-light-uppercase-brand-1">Flyout Navigation</h3>
        </header>
    </a>
    
    ...
    
</div>

<div class="row-block text-center">
    
    <div class="widget-spectrumQuarter span-3">
        <div class="widget_icon button-icon-plain-size-8">
            <i class="fa fa-desktop"></i>
        </div>
        <header class="widget_header heading_group">
            <h4 class="heading-size-7"><span>3254</span></h4>
            <h5 class="heading-light">>Sales</h5>
        </header>
    </div>
    
    ...
    
</div>

Customizing

Widgets can be customized using the following options:

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

Property Name	Default Value	Description
`block-background`	`color('greyscale', 'white')`	The background for a widget with the `block` modifier.
`block-padding`	`2.5em 1em`	The padding for a widget with the `block` modifier.
`block-small-padding`	`1.5em 1em`	The padding for a widget with `block` and `small` modifiers.
`block-fill-background`	`color('brand', 'primary')`	The background for a widget with `block` and `fill` modifiers.
`block-fill-color`	`color('greyscale', 'white')`	The text color for a widget with `block` and `fill` modifiers.
`block-hover-background`	`color('brand', 'primary')`	The background for a widget with the `block` modifier when hovered.
`block-hover-color`	`color('greyscale', 'white')`	The text color for a widget with the `block` modifier when hovered.
`block-hover-fill-background`	`darken(color('brand', 'primary'), 10%)`	The background for a widget with `block` and `fill` modifiers when hovered.
`block-hover-panel-border-color`	`color('brand', 'primary')`	The border-color for a widget with `block` and `panel` modifiers when hovered.
`panel-padding`	`4%`	The padding for a widget with the `panel` modifier.
`panel-border`	`1px solid color('greyscale', 'grey-2')`	The border for a widget with the `panel` modifier.
`panel-small-padding`	`4% 2%`	The padding for a widget with `panel` and `small` modifiers.
`border`	`0.6em solid rgba(black, 0.15)`	The border for a widget using either the `borderTop` or `borderLeft` modifiers.
`border-highlight-color`	`color('brand', 'primary')`	The border color for a widget using either the `borderTop` or `borderLeft` and `highlight` modifiers.
`border-highlight-hover-color`	`rgba(black, 0.15)`	The border color for a widget using either the `borderTop` or `borderLeft` and `highlight` modifiers when hovered.
`scale`	`1.1`	The size which a widget using the `scale` modifier should scale to when hovered.
`zoom-bg-scale`	`1.3`	The size which the background image in a widget using the `zoom` modifier should scale to when hovered.
`spectrum-quarter-padding`	`2.5em 1em`	The padding for widgets using the `spectrumQuarter` modifier.
`spectrum-quarter-large-padding`	`4%`	The padding for widgets using `spectrumQuarter` and `large` modifiers.
`tub-color`	`color('greyscale', 'white')`	The text color for the `tub` component.
`tub-background`	`rgba(black, 0.4)`	The background for the widget `tub` component.
`feature-padding`	`15% 2em 2em`	The padding for widgets using the `feature` modifier.
`icon-color`	`color('greyscale', 'grey-3')`	The color for the widget `icon` component.

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

@include widgets((
    'block-padding' : 2em,
    'zoom-bg-scale' : 1.5
));

Sign in to your account

Sign in using...

Create your free account

Sign up using...

$34.90

Nexus

Digital Agency Theme

Kayzen

Kayzen Default Theme

Agenda

Multipurpose Theme

Blizzard

Portfolio Theme

Tempus

Portfolio Theme

Dart

Portfolio Theme

Mall

Shop Theme

Arndale

Shop Theme

Lily

Shop Theme

Hollywood

Newspaper Theme

Coffee

Newspaper Theme

Gaucho

Newspaper Theme

Files

Module Overview

Examples

Full-Screen Examples