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.
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.
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.
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.
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; }