Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.
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; } }