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

  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit

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

  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit

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

  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit

Unordered Lists

Description: The example of using morph LivIcons in unordered lists.

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

<!-- Unordered Lists -->
<div class="container">
    <div class="row">
        <div class="ul-01 col-md-4">
            <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
            <ul class="list-unstyled">
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-square-triangle2;
                        size: 10px;
                        style: solid;
                        solidColor: #3498DB;
                        strokeWidth: 1;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-square-triangle2;
                        size: 10px;
                        style: solid;
                        solidColor: #FF6B57;
                        strokeWidth: 1;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-square-triangle2;
                        size: 10px;
                        style: solid;
                        solidColor: #32C5D2;
                        strokeWidth: 1;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-square-triangle2;
                        size: 10px;
                        style: solid;
                        solidColor: #B771B0;
                        strokeWidth: 1;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-square-triangle2;
                        size: 10px;
                        style: solid;
                        solidColor: #EB5D68;
                        strokeWidth: 1;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
            </ul>
        </div>
        <div class="ul-01 col-md-4">
            <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
            <ul class="list-unstyled">
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-minus-plus;
                        size: 15px;
                        style: solid;
                        solidColor: #ccc;
                        strokeWidth: 2;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-minus-plus;
                        size: 15px;
                        style: solid;
                        solidColor: #ccc;
                        strokeWidth: 2;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-minus-plus;
                        size: 15px;
                        style: solid;
                        solidColor: #ccc;
                        strokeWidth: 2;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-minus-plus;
                        size: 15px;
                        style: solid;
                        solidColor: #ccc;
                        strokeWidth: 2;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-minus-plus;
                        size: 15px;
                        style: solid;
                        solidColor: #ccc;
                        strokeWidth: 2;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
            </ul>
        </div>
        <div class="ul-01 col-md-4">
            <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
            <ul class="list-unstyled">
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-radio-4;
                        rotate: 135;
                        size: 16px;
                        style: lines;
                        strokeColor: #32C5D2;
                        strokeWidth: original;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-radio-4;
                        rotate: 135;
                        size: 16px;
                        style: lines;
                        strokeColor: #32C5D2;
                        strokeWidth: original;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-radio-4;
                        rotate: 135;
                        size: 16px;
                        style: lines;
                        strokeColor: #32C5D2;
                        strokeWidth: original;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-radio-4;
                        rotate: 135;
                        size: 16px;
                        style: lines;
                        strokeColor: #32C5D2;
                        strokeWidth: original;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
                <li>
                    <div class="livicon-evo" data-options="
                        name: morph-radio-4;
                        rotate: 135;
                        size: 16px;
                        style: lines;
                        strokeColor: #32C5D2;
                        strokeWidth: original;
                        eventOn: parent;
                        duration: 0.1;
                        colorsOnHover: darker">
                    </div>
                    Lorem ipsum dolor sit
                </li>
            </ul>
        </div>
    </div>
</div>
/********** Unordered Lists **********/
.ul-01 p {
  font-size: 18px;
  font-weight: 300;
  color: #5c6873;
  margin-bottom: 20px;
}
.ul-01 .livicon-evo {
  display: block;
  float: left;
  margin-right: 10px;
  margin-top: -2px;
}
.ul-01 li {
  list-style: none;
  font-size: 16px;
  font-weight: 400;
  color: #5c6873;
  margin-bottom: 12px;
}
@media (max-width: 991px) {
  .ul-01 {
    margin-bottom: 40px;
  }
}

Categories

Miscellaneous

Share