+1 234 567 89 10

Components

Buttons

Primary Secondary Success Info Warning Danger Gold Orange Link
Primary
Secondary
Success
Info
Warning
Danger
Gold
Orange
Link

Outline buttons

Primary Secondary Success Info Warning Danger Gold Orange
<a href="#" class="btn btn-outline-primary">Primary</a>
<a href="#" class="btn btn-outline-secondary">Secondary</a>
<a href="#" class="btn btn-outline-success">Success</a>
<a href="#" class="btn btn-outline-info">Info</a>
<a href="#" class="btn btn-outline-warning">Warning</a>
<a href="#" class="btn btn-outline-danger">Danger</a>
<a href="#" class="btn btn-outline-gold">Gold</a>
<a href="#" class="btn btn-outline-orange">Orange</a>

Added icon

Calculate shipping Calculate shipping

For the icon, you need to assign a class: btn-added-icon


<a href="#" class="btn btn-primary">
    
    <i class="btn-added-icon icon icofont icofont-check-circled"></i>
    <span class="btn-body">
        Calculate shipping
    </span>
</a>

<a href="#" class="btn btn-primary">
    <span class="btn-body">
        Calculate shipping
    </span>
    
    <i class="btn-added-icon icon icofont icofont-check-circled"></i>
</a>

Large buttons

Calculate shipping Calculate shipping
<a href="#" class="btn btn-outline-primary btn-lg">
    <span class="btn-body">
        Calculate shipping
    </span>
    <i class="btn-added-icon icon icofont icofont-check-circled"></i>
</a>

<a href="#" class="btn btn-primary btn-lg">
    <span class="btn-body">
        Calculate shipping
    </span>
    <i class="btn-added-icon icon icofont icofont-check-circled"></i>
</a>

Material effect

Calculate shipping Calculate shipping

To create a material design effect, add a class: btn-material

<a href="#" class="btn btn-outline-primary btn-material">
    <span class="btn-body">
        Calculate shipping
    </span>
    <i class="btn-added-icon icon icofont icofont-check-circled"></i>
</a>

<a href="#" class="btn btn-primary btn-material">
    <span class="btn-body">
        Calculate shipping
    </span>
    <i class="btn-added-icon icon icofont icofont-check-circled"></i>
</a>

Block level buttons

<button type="button" class="btn btn-primary btn-lg btn-block btn-material">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block btn-material">Block level button</button>

Forms

Form controls

We'll never share your email with anyone else.
<div class="form-group">
    <label for="exampleInputName1">Your name</label>
    <input type="text" class="form-control" id="exampleInputName1" placeholder="Your name">
</div>

<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
  
<div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-select" id="exampleSelect1">
        <option>Otion 1</option>
        <option>Otion 2</option>
        <option>Otion 3</option>
        <option>Otion 4</option>
        <option>Otion 5</option>
    </select>
</div>
<div class="form-group">
    <label for="deliveryComp">Example multiple select</label>
    <select class="form-select-multy" id="deliveryComp" data-placeholder="Delivery is not selected"></select>
</div>

To edit the list, you need to fix the array in main.js

// Multi select customize
$('#deliveryComp').selectize({
    theme: 'default',
    valueField: 'id',
    // Demo data, shipping companies
    options: [
        {id: 1, title: 'Delivery 1', url: 'example.com'},
        {id: 2, title: 'Delivery 2', url: 'example.com'},
        {id: 3, title: 'Delivery 3', url: 'example.com'},
        {id: 4, title: 'Delivery 4', url: 'example.com'},
    ],
    render: {
        option: function(data, escape) {
            return '<div class="option">' +
                        '<span class="title">' + escape(data.title) + '</span>' +
                        '<span class="url">' + escape(data.url) + '</span>' +
                    '</div>';
        },
        item: function(data, escape) {
            return '<div class="item">' + escape(data.title) + '</div>';
        }
    },
    create: function(input) {
        return {
            id: 0,
            title: input,
            url: '#'
        };
    }
});

More detailed documentation you can find on the site of the plugin: http://selectize.github.io/selectize.js/

<div class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
Drag the file from your computer, or click to download
<div class="form-group">
    <label for="exampleTextarea">Drug&Drop</label>
    <input type="file" id="file" class="dropify">
    <small class="form-text text-muted">Drag the file from your computer, or click to download</small>
</div>
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
<div class="form-group">
    <label class="custom-file">
        <input type="file" id="file" class="custom-file-input">
        <span class="custom-file-control"></span>
    </label>
    <small class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</div>
Radio buttons
<fieldset class="form-group">
    <legend>Radio buttons</legend>
    <label class="custom-control custom-radio">
        <input id="radio1" name="radio" type="radio" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">Toggle this custom radio</span>
    </label>

    <label class="custom-control custom-radio">
        <input id="radio2" name="radio" type="radio" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">Or toggle this other custom radio</span>
    </label>
</fieldset>

Custom checkbox

<div class="form-check">
    <legend>Custom checkbox</legend>
    <label class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input">
        <span class="custom-control-indicator">
            <i class="custom-control-icon icofont icofont-check-alt"></i>
        </span>
        <span class="custom-control-description">Check this custom checkbox</span>
    </label>

    <label class="custom-control custom-checkbox-app">
        <input type="checkbox" class="custom-control-input">
        <span class="custom-control-indicator">
            <span class="custom-control-on">on</span>
            <span class="custom-control-off">off</span>
        </span>
        <span class="custom-control-description">Check this custom checkbox</span>
    </label>
</div>

Inline labels

<div class="form-group row">
    <label for="example-text-input" class="col-2 col-form-label">Text</label>
    <div class="col-10">
        <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
    </div>
</div>
<div class="form-group row">
    <label for="example-search-input" class="col-2 col-form-label">Search</label>
    <div class="col-10">
        <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
    </div>
</div>

Range sliders

More detailed documentation of the plugin you can find on the website: https://refreshless.com/nouislider/

Price slider

This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
<div class="range-slider range-price"
     data-range-min="0"
     data-range-max="800"
     data-handle-min="124"
     data-handle-max="574">
    
    
    <div class="range-slider-bar"></div>
    
    
    <div class="range-slider-footer">
       
        
        <div class="range-slider-fields">
            <span class="range-slider-addon">$</span>
            <span class="range-slider-input min"></span>
        </div>
       
        
        <div class="range-slider-fields max float-right">
            <span class="range-slider-addon">$</span>
            <span class="range-slider-input max text-right"></span>
        </div>
    </div>
</div>

<small class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>

Sizing slider

Size
  • M
  • L
  • XS
  • XL
  • XXL
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
<div class="range-slider range-sizing"
 data-range="2"
 data-value="M,L,XS,XL,XXL">

    <div class="range-slider-header">
        <span class="text-uppercase">Size</span>
        <ul class="range-slider-select">
            <li class="bg-theme" data-li="1">M</li>
            <li class="bg-theme" data-li="2">L</li>
            <li class="bg-theme" data-li="3">XS</li>
            <li class="bg-theme" data-li="4">XL</li>
            <li class="bg-theme" data-li="5">XXL</li>
        </ul>
    </div>

    <div class="range-slider-bar"></div>

    <div class="range-slider-footer">
        <div class="range-slider-fields">
            <span class="range-slider-addon">size:</span>
            <span class="range-slider-input min"></span>
        </div>
    </div>
</div>
<small class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>

Checking colors

Checking color
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
<div class="form-group">
    <div class="check-colors">

        
        <div class="check-colors-header">
            <span class="text-uppercase">Checking color</span>
        </div>

        <div class="check-colors-block">

            <label class="check-colors-item">
                <input class="check-colors-input-color" type="radio" name="checkColors" data-color="white" checked>
                <span class="check-colors-indicator white">
                    <i class="check-colors-icon icofont icofont-check-alt"></i>
                </span>
            </label>

            <label class="check-colors-item">
                <input class="check-colors-input-color" type="radio" name="checkColors" data-color="black">
                <span class="check-colors-indicator black">
                    <i class="check-colors-icon icofont icofont-check-alt"></i>
                </span>
            </label>

            <label class="check-colors-item">
                <input class="check-colors-input-color" type="radio" name="checkColors" data-color="red">
                <span class="check-colors-indicator red">
                    <i class="check-colors-icon icofont icofont-check-alt"></i>
                </span>
            </label>

            <label class="check-colors-item">
                <input class="check-colors-input-color" type="radio" name="checkColors" data-color="purple">
                <span class="check-colors-indicator purple">
                    <i class="check-colors-icon icofont icofont-check-alt"></i>
                </span>
            </label>

            <label class="check-colors-item">
                <input class="check-colors-input-color" type="radio" name="checkColors" data-color="blue">
                <span class="check-colors-indicator blue">
                    <i class="check-colors-icon icofont icofont-check-alt"></i>
                </span>
            </label>

            <label class="check-colors-item">
                <input class="check-colors-input-color" type="radio" name="checkColors" data-color="aqua">
                <span class="check-colors-indicator aqua">
                    <i class="check-colors-icon icofont icofont-check-alt"></i>
                </span>
            </label>

            <label class="check-colors-item">
                <input class="check-colors-input-color" type="radio" name="checkColors" data-color="green">
                <span class="check-colors-indicator green">
                    <i class="check-colors-icon icofont icofont-check-alt"></i>
                </span>
            </label>

            <label class="check-colors-item">
                <input class="check-colors-input-color" type="radio" name="checkColors" data-color="yellow">
                <span class="check-colors-indicator yellow">
                    <i class="check-colors-icon icofont icofont-check-alt"></i>
                </span>
            </label>

            <label class="check-colors-item">
                <input class="check-colors-input-color" type="radio" name="checkColors" data-color="khaki">
                <span class="check-colors-indicator khaki">
                    <i class="check-colors-icon icofont icofont-check-alt"></i>
                </span>
            </label>

            <label class="check-colors-item">
                <input class="check-colors-input-color" type="radio" name="checkColors" data-color="silver">
                <span class="check-colors-indicator silver">
                    <i class="check-colors-icon icofont icofont-check-alt"></i>
                </span>
            </label>
        </div>

        <div class="check-colors-footer">
            <span class="check-colors-addon">selected:</span>
            <span class="check-colors-input">white</span>
        </div>
    </div>

    <small class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</div>

Navs

Default nav

<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link a-hover-theme btn-material active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link a-hover-theme btn-material" href="#" data-toggle="dropdown">category <i class="icofont icofont-curved-down"></i></a>
        <div class="dropdown-menu bg-dark-light">
            <a class="dropdown-item btn-material a-hover-theme" href="#">Action</a>
            <a class="dropdown-item btn-material a-hover-theme" href="#">Another action</a>
            <a class="dropdown-item btn-material a-hover-theme" href="#">Something else here</a>
        </div>
    </li>
    <li class="nav-item">
       <a class="nav-link a-hover-theme btn-material" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link a-hover-theme btn-material" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link a-hover-theme btn-material disabled" href="#">Disabled</a>
    </li>
</ul>

Steps nav

For a responsive display, add a class: response

<ul class="nav-steps response">
          
    <li class="nav-step active">
         
        <div class="nav-step-number bg-theme">
            1
        </div>
         
        <div class="nav-step-text text-uppercase">
            Confirm 
             
            <small>products list</small>
        </div>
         
        <div class="nav-step-next-icon text-warning">
            <i class="icofont icofont-stylish-right text-yellow"></i>
        </div>
    </li>
     
    <li class="nav-step">
        <div class="nav-step-number bg-theme">
            2
        </div>
        <div class="nav-step-text text-uppercase">
            Enter
            <small>your address</small>
        </div>
        <div class="nav-step-next-icon text-warning">
            <i class="icofont icofont-stylish-right text-yellow"></i>
        </div>
    </li>
     
    <li class="nav-step">
        <div class="nav-step-number bg-theme">
            3
        </div>
        <div class="nav-step-text text-uppercase">
            Select 
            <small>payment method</small>
        </div>
        <div class="nav-step-next-icon text-warning">
            <i class="icofont icofont-stylish-right text-yellow"></i>
        </div>
    </li>
     
    <li class="nav-step">
        <div class="nav-step-number bg-theme">
            4
        </div>
        <div class="nav-step-text text-uppercase">
            Confirm  
            <small>your order</small>
        </div>
    </li>
</ul>

Collapsed category

<div class="sdw-wrap full">
    <nav class="navbar navbar-toggleable-sm navbar-category navbar-light block-radius bg-alpha">

        
        <div class="navbar-header bg-theme">
            <span class="navbar-header-text text-uppercase">Category</span>
            <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-header-bottom"></div>
        </div>

        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link a-hover-theme btn-material active" href="#">Active</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link a-hover-theme btn-material" href="#" data-toggle="dropdown">category <i class="icofont icofont-curved-down float-right"></i></a>

                    <div class="dropdown-menu bg-dark-light">
                        <a class="dropdown-item btn-material a-hover-theme" href="#">Action</a>
                        <a class="dropdown-item btn-material a-hover-theme" href="#">Another action</a>
                        <a class="dropdown-item btn-material a-hover-theme" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link a-hover-theme btn-material" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link a-hover-theme btn-material" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link a-hover-theme btn-material disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

Subscribe block

<div class="subscribe">
    
    <div class="subscribe-header text-uppercase">
        Head
        <small>sub</small>
    </div>
    <form class="subscribe-block">
        <div class="subscribe-wrap">
            <div class="subscribe-name">
                
                <input type="text" class="subscribe-name-input" placeholder="Name">
            </div>
            <div class="subscribe-email">
                
                <input type="text" class="subscribe-email-input" placeholder="Email">
            </div>
        </div>
        
        <button class="subscribe-btn next bg-theme">
            <i class="icofont icofont-curved-right"></i>
        </button>
        
        <button class="subscribe-btn bg-theme">
            <i class="icofont icofont-send-mail"></i>
        </button>
    </form>
</div>

Parallax

Parallax image

<div class="parallax">
                        
    

    
    <div class="parallax-overlay bg-theme opc-5"
         data-default-pos="-600"
         data-parallax-image="images/blocks/bg-02.jpg"
         data-speed-direction="-.2"></div>
</div>

Add an overlay to the parallax image. Using the built-in background colors. Either with the use of tag style. Use the class: opc-1, opc-2, opc-3, opc-4, opc-5, opc-6, opc-7, opc-8, opc-9, to create transparency overlay.

Parallax content

TEXT
<div class="parallax">

    <div class="parallax-content"
         data-speed-direction=".2"
         data-default-pos="-400"
         data-parallax-block="true">
        
        
        <div class="parallax-text">
            TEXT
        </div>
    </div>
</div>

Add an overlay to the parallax image. Using the built-in background colors. Either with the use of tag style. Use the class: opc-1, opc-2, opc-3, opc-4, opc-5, opc-6, opc-7, opc-8, opc-9, to create transparency overlay.

Paginations

Default paginations

<ul class="pagination">
    <li class="page-item">
        <a class="page-link a-hover-theme" href="javascript:;">
            <i class="icofont icofont-rounded-left"></i>
        </a>
    </li>
    <li class="page-item"><a class="page-link a-hover-theme" href="javascript:;">01</a></li>
    <li class="page-item active"><a class="page-link a-theme" href="javascript:;">02</a></li>
    <li class="page-item"><a class="page-link a-hover-theme" href="javascript:;">03</a></li>
    <li class="page-item"><a class="page-link a-hover-theme" href="javascript:;">04</a></li>
    <li class="page-item"><a class="page-link a-hover-theme" href="javascript:;">05</a></li>
    <li class="page-item">
        <a class="page-link a-hover-theme" href="javascript:;">
            <i class="icofont icofont-rounded-right"></i>
        </a>
    </li>
</ul>

Paginations bar

<div class="pagination-bar">
                        
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link a-hover-theme" href="javascript:;">
                <i class="icofont icofont-rounded-left"></i>
            </a>
        </li>
        <li class="page-item"><a class="page-link a-hover-theme" href="javascript:;">01</a></li>
        <li class="page-item active"><a class="page-link a-theme" href="javascript:;">02</a></li>
        <li class="page-item"><a class="page-link a-hover-theme" href="javascript:;">03</a></li>
        <li class="page-item"><a class="page-link a-hover-theme" href="javascript:;">04</a></li>
        <li class="page-item"><a class="page-link a-hover-theme" href="javascript:;">05</a></li>
        <li class="page-item">
            <a class="page-link a-hover-theme" href="javascript:;">
                <i class="icofont icofont-rounded-right"></i>
            </a>
        </li>
    </ul>
    
    
    <ul class="pagination-bar-switcher hidden-lg-down">
        <li class="switcher-item cols active">
            <span></span><span></span><span></span>
        </li>
        <li class="switcher-item rows">
            <span></span><span></span><span></span>
        </li>
    </ul>
</div>

For the operation of the switch, it must be placed inside the wrapper with the class: card-shop-switch

Card

Default card

New
Card image cap

10 january 2017

Paper bag

Fugiat mollitia vero, id eligendi non suscipit laboriosam maiores, perspiciatis ullam eveniet molestiae, nesciunt est ipsa veniam consequuntur in totam.

Read more info More
23 members
Card image cap

10 january 2017

Paper bag

Fugiat mollitia vero, id eligendi non suscipit laboriosam maiores, perspiciatis ullam eveniet molestiae, nesciunt est ipsa veniam consequuntur in totam.

Read more info More
23 members

<div class="col-6 col-sm-4 col-md-6 col-xl-4 mb-5">
    
    <div class="sdw-wrap hover">
        <div class="card">
            
            <div class="card-badge text-uppercase bg-success">New</div>
            
            <div class="card-img-top">
                <img src="images/blog/img-01.jpg" alt="Card image cap">
            </div>

            <div class="card-block">
                <p class="card-text mb-0">
                    <small class="text-muted">10 january 2017</small>
                </p>
                <h4 class="card-title text-uppercase">Paper bag</h4>
                <p class="card-text">
                    Fugiat mollitia vero, id eligendi non suscipit laboriosam <span class="hidden-xs-down">maiores, perspiciatis ullam eveniet molestiae, nesciunt est ipsa veniam consequuntur in totam.</span>
                </p>
                <a href="#" class="btn btn-primary btn-block btn-material">
                    <span class="hidden-xs-down">Read more info</span>
                    <span class="hidden-sm-up">More</span>
                </a>
                
                <div class="card-rate inline">
                    <ul class="card-rate-stars">
                        <li class="card-rate-star active">
                            <i class="icofont icofont-star"></i>
                        </li>
                        <li class="card-rate-star active">
                            <i class="icofont icofont-star"></i>
                        </li>
                        <li class="card-rate-star active">
                            <i class="icofont icofont-star"></i>
                        </li>
                        <li class="card-rate-star">
                            <i class="icofont icofont-star"></i>
                        </li>
                        <li class="card-rate-star">
                            <i class="icofont icofont-star"></i>
                        </li>
                    </ul>
                    
                    <span class="card-rate-text hidden-xs-down">
                        23 members
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Shop card

Card image Card image
New

T-Shirt Fake brand

23 members rate it
Sale -20%
  • d
  • h
  • m
  • s
  • 24 days. Money Back Guarantee
  • Free shipping
  • Free help and setup

Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.

$ 234.00 1 357.50 to favorite Read more
Card image

T-Shirt Fake brand

23 members rate it
  • 24 days. Money Back Guarantee
  • Free shipping
  • Free help and setup

Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.

$ 1 257.50 to favorite Read more
Card image
Hot

T-Shirt Fake brand

23 members rate it
  • 24 days. Money Back Guarantee
  • Free shipping
  • Free help and setup

Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.

$ 1 375.50 to favorite Read more

<div class="col-6 col-sm-4 col-md-6 col-xl-4 card-shop-fix mb-4">
    
    <div class="sdw-wrap card-sdw full hover">
        
        <div class="card card-shop timer" data-timer-date="2018, 2, 5, 0, 0, 0">
            <div class="card-shop-wrap">
                
                <div class="card-img">
                    
                    <img class="card-img-first" src="images/shop/img-01.jpg" alt="Card image">
                    <img class="card-img-second" src="images/shop/img-01-1.jpg" alt="Card image">
                </div>
                <div class="card-img-overlay">
                    <div class="card-badge text-uppercase bg-success">New</div>
                    <h4 class="card-title text-uppercase">T-Shirt <small>Fake brand</small></h4>
                    
                    <div class="card-rate">
                        <ul class="card-rate-stars">
                            <li class="card-rate-star active">
                                <i class="icofont icofont-star"></i>
                            </li>
                            <li class="card-rate-star active">
                                <i class="icofont icofont-star"></i>
                            </li>
                            <li class="card-rate-star active">
                                <i class="icofont icofont-star"></i>
                            </li>
                            <li class="card-rate-star">
                                <i class="icofont icofont-star"></i>
                            </li>
                            <li class="card-rate-star">
                                <i class="icofont icofont-star"></i>
                            </li>
                        </ul>
                        
                        <span class="card-rate-text hidden-xs-down">
                            23 members rate it
                        </span>
                    </div>
                    
                    <div class="card-timer hidden-xs-down">
                        
                        <span class="card-timer-head text-danger">Sale -20%</span>
                        <ul class="card-timer-items">
                            <li class="card-timer-item">
                                <span class="tdtimer-d"></span>d
                            </li>
                            <li class="card-timer-item">
                                <span class="tdtimer-h"></span>h
                            </li>
                            <li class="card-timer-item">
                                <span class="tdtimer-m"></span>m
                            </li>
                            <li class="card-timer-item">
                                <span class="tdtimer-s"></span>s
                            </li>
                        </ul>
                    </div>
                    
                    <ul class="custom-icons">
                        <li class="custom-icons-item">
                            <i class="custom-icons-icon icofont icofont-shield"></i>
                            <span class="custom-icons-text">24 days. Money Back Guarantee</span>
                        </li>
                        <li class="custom-icons-item">
                            <i class="custom-icons-icon icofont icofont-ship"></i>
                            <span class="custom-icons-text">Free shipping</span>
                        </li>
                        <li class="custom-icons-item">
                            <i class="custom-icons-icon icofont icofont-hand"></i>
                            <span class="custom-icons-text">Free help and setup</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-block">
                
                <p class="card-text">
                    Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.
                </p>
                
                <a href="#" class="card-shop-buy bg-theme btn-material">
                    <span class="card-shop-buy-curr">$</span>
                    <span class="card-shop-buy-price">
                        <span class="card-shop-buy-sale hidden-xs-down">234.00</span>
                        1 357<small>.50</small>
                    </span>
                    <span class="card-shop-buy-icon hidden-xs-down">
                        <i class="icofont icofont-cart-alt"></i>
                    </span>
                </a>
                
                <a href="#" class="card-link-features push-left hidden-xs-down">
                    <i class="icofont icofont-star"></i>
                    to favorite
                </a>
                
                <a href="#" class="card-link card-link-more push-right text-uppercase a-hover-theme">Read more</a>
            </div>
        </div>
    </div>
</div>

Comments (Media object)

John Doe
John Doe since: 15 dec 2016
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
John Doe
John Doe since: 15 dec 2016
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
John Doe
John Doe since: 15 dec 2016
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
John Doe
John Doe since: 15 dec 2016
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media mb-5">
    
    <a href="#">
        
        <img class="media-image d-flex mr-4" src="images/profile/profile-img.jpg" alt="John Doe">
    </a>
    <div class="media-body">
        
        <h5 class="media-header">
            
            <a href="#" class="media-header-link a-hover-theme">John Doe</a>
            <small class="media-user-since text-muted">since: 15 dec 2016</small>
        </h5>
        
        <div class="media-block">
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </div>
        
        <div class="media-footer">
            
            <span class="media-footer-data"><small class="text-muted">Published:</small> 12 feb 2017</span>
            
            <a href="#" class="media-footer-reply">
                <i class="icofont icofont-reply"></i>
            </a>
        </div>
        
        
        <div class="media mt-4">
            <a href="#">
                <img class="media-image mr-4" src="images/profile/profile-img.jpg" alt="John Doe">
            </a>
            <div class="media-body">
                <h5 class="media-header">
                    <a href="#" class="media-header-link">John Doe</a>
                    <small class="media-user-since text-muted">since: 15 dec 2016</small>
                </h5>
                <div class="media-block">
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                </div>
                <div class="media-footer">
                    <span class="media-footer-data"><small class="text-muted">Published:</small> 12 feb 2017</span>
                    <a href="#" class="media-footer-reply">
                        <i class="icofont icofont-reply"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="media mt-4">
            <a href="#">
                <img class="media-image mr-4" src="images/profile/profile-img.jpg" alt="John Doe">
            </a>
            <div class="media-body">
                <h5 class="media-header">
                    <a href="#" class="media-header-link">John Doe</a>
                    <small class="media-user-since text-muted">since: 15 dec 2016</small>
                </h5>
                <div class="media-block">
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                </div>
                <div class="media-footer">
                    <span class="media-footer-data"><small class="text-muted">Published:</small> 12 feb 2017</span>
                    <a href="#" class="media-footer-reply">
                        <i class="icofont icofont-reply"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div id="accordion">
    
    <div class="card mb-3">
        
        <div class="card-header card-header-accordion bg-theme btn-material" id="headingOne">
            <h5 class="mb-0">
                
                <a class="card-accordion-link card-accordion-link-indicator" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    
                    <span class="indicator">
                        <span class="bg-theme"></span>
                    </span>
                    Collapsible Group Item #1
                </a>
            </h5>
        </div>
        <div id="collapseOne" class="collapse show">
            <div class="mt-3 mb-3">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
    
    <div class="card mb-3">
        <div class="card-header card-header-accordion bg-theme btn-material" id="headingTwo">
            <h5 class="mb-0">
                <a class="card-accordion-link card-accordion-link-indicator collapsed" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    <span class="indicator">
                        <span class="bg-theme"></span>
                    </span>
                    Collapsible Group Item #2
                </a>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse">
            <div class="mt-3 mb-3">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
    
    <div class="card mb-3">
        <div class="card-header card-header-accordion bg-theme btn-material" id="headingThree">
            <h5 class="mb-0">
                <a class="card-accordion-link card-accordion-link-indicator collapsed" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                    <span class="indicator">
                        <span class="bg-theme"></span>
                    </span>
                    Collapsible Group Item #3
                </a>
            </h5>
        </div>
        <div id="collapseThree" class="collapse">
            <div class="mt-3 mb-3">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

Shadow wrapper

<div class="sdw-wrap">
    
</div>


<div class="sdw-wrap hover">
    
</div>