Warning

LivIcons Evolution is a jQuery Plugin

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.

Warning Panel 01

Description: Warning panel example 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

<!-- Warning Panel 01 -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="warning-panel-01">
                <h6 class="text-uppercase">
                    <div class="livicon-evo" data-options="
                        name: warning-alt.svg;
                        style: lines;
                        size: 40px;
                        strokeColor: #C8D046;
                        strokeWidth: 2;
                        autoPlay: true;
                        duration: 2;
                        repeat: loop;
                        repeatDelay: 1;
                        eventOn: none;
                        drawOnViewport: true
                    "></div>
                    Warning
                </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>
/********* Warning Panel 01 **********/
.warning-panel-01 {
  padding: 40px 40px 30px;
  margin: 20px 0;
  background-color: #fafafa;
  border-left: 5px solid #C8D046;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.warning-panel-01 .livicon-evo {
  display: block;
  float: left;
  margin-right: 10px;
  margin-left: -3px;
  margin-top: -13px;
  opacity: 0.6;
}
.warning-panel-01 h6 {
  font-weight: 900;
}
.warning-panel-01 h6:after {
  clear: both;
}
.warning-panel-01 h3 {
  font-weight: 300;
  margin-top: 30px;
  margin-bottom: 15px;
}
.warning-panel-01 p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
}

Categories

Panels

Share