Worldwide

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.

Delivery

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.

Insurance

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.

Quick Help

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.

Icon Boxes 02

Description: Four columns responsive icon boxes with original LivIcons style inside. Replace javascript: inside href attribute with your links.

Requires: Bootstrap 3.X for basic grid, buttons, text, etc. styles.

WordPress Note: This example may require theme files customization or using a page builder (composer) at your own. See on it as a starting point.

Important: LivIcons data-options are set to different from these defaults only! If you have another set of the default options please use a full notation of them which you can get from the Configuration tool

<!-- Icon box 02 -->
<div class="container">
    <div class="row">
        <div class="icon-box-02 col-sm-3 col-xs-12">
            <div>
                <div class="livicon-evo" data-options="
                    name: globe.svg;
                    eventOn: grandparent;
                    drawOnViewport: true
                "></div>
                <h4 class="text-center"><a href="javascript:">Worldwide</a></h4>
                <p class="text-center">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.</p>
            </div>
        </div>
        <div class="icon-box-02 col-sm-3 col-xs-12">
            <div>
                <div class="livicon-evo" data-options="
                    name: truck.svg;
                    eventOn: grandparent;
                    drawOnViewport: true
                "></div>
                <h4 class="text-center"><a href="javascript:">Delivery</a></h4>
                <p class="text-center">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.</p>
            </div>
        </div>
        <div class="icon-box-02 col-sm-3 col-xs-12">
            <div>
                <div class="livicon-evo" data-options="
                    name: shield.svg;
                    eventOn: grandparent;
                    drawOnViewport: true
                "></div>
                <h4 class="text-center"><a href="javascript:">Insurance</a></h4>
                <p class="text-center">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.</p>
            </div>
        </div>
        <div class="icon-box-02 col-sm-3 col-xs-12 last">
            <div>
                <div class="livicon-evo" data-options="
                    name: phone.svg;
                    eventOn: grandparent;
                    drawOnViewport: true
                "></div>
                <h4 class="text-center"><a href="javascript:">Quick Help</a></h4>
                <p class="text-center">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content.</p>
            </div>
        </div>
    </div>
</div>
/************ Icon box 02 ************/
.icon-box-02, .icon-box-02 a {
  -webkit-transition: all .2s linear;
  -ms-transition: all .2s linear;
  transition: all .2s linear;
}
.icon-box-02 {
  background: #fff;
  border-width: 1px 0 1px 1px;
  border-color: #eee;
  border-style: solid;
  padding: 40px 30px 30px;
}
.icon-box-02:hover {
  background: #eee;
}
.icon-box-02.last {
  border-right-width: 1px;
}
.icon-box-02 .livicon-evo {
  margin: 0 auto 30px;
}
.icon-box-02 h4 {
  margin-bottom: 20px;
}
.icon-box-02 p {
  color: #777;
}

Categories

Icon Boxes

Share