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. It's also called placeholder (or filler) text.
Description: Information panel with auto played LivIcon.
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
<!-- Info Panel 01 -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="info-panel-01">
<h6 class="text-uppercase">
<div class="livicon-evo" data-options="
name: info-alt.svg;
style: lines;
size: 40px;
strokeColor: #5893DD;
strokeWidth: 2;
autoPlay: true;
duration: 2;
repeat: loop;
repeatDelay: 1;
eventOn: none;
drawOnViewport: true
"></div>
Information
</h6>
<h3>LivIcons Evolution is a jQuery Plugin</h3>
<p>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. It's also called placeholder (or filler) text.</p>
</div>
</div>
</div>
</div>
/*********** Info Panel 01 ***********/
.info-panel-01 {
padding: 40px 40px 30px;
margin: 20px 0;
background-color: #fafafa;
border-left: 5px solid #5893DD;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.info-panel-01 .livicon-evo {
display: block;
float: left;
margin-right: 10px;
margin-left: -3px;
margin-top: -13px;
opacity: 0.3;
}
.info-panel-01 h6 {
font-weight: 900;
}
.info-panel-01 h6:after {
clear: both;
}
.info-panel-01 h3 {
font-weight: 300;
margin-top: 30px;
margin-bottom: 15px;
}
.info-panel-01 p {
font-weight: 300;
font-size: 16px;
line-height: 1.5;
}