(833) 888-2666 hello@myvivatel.com

List Styles

[row]
[one_whole]

Unordered Lists

[row]

UL .disc

[list type=”disc”]

  • List item longer description.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

    • [/list]


    UL .circle

    [list type=”circle”]

  • List item longer description.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

    • [/list]


    UL .square

    [list type=”square”]

  • List item longer description.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

    • [/list]


    [/row]
    [one_whole]
    [row]

    UL .type1

    [list type=”type1″]

  • List item longer description.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

    • [/list]


    UL .type2

    [list type=”type2″]

  • List item longer description.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

    • [/list]


    UL .type3

    [list type=”type3″]

  • List item longer description.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

    • [/list]


    [/row]
    [/one_whole]
    [row]
    [one_whole]

    UL .inline-list

    [list type=”inline-list”]

  • Link 1
  • Link 2
  • Link 3
  • Link 4
  • Link 5

    • [/list]
    [/one_whole]
    [/row]
    [row]

    How?

    [list type=”type3″]
    <li><i class=”icon-caret-right”></i>List item longer description.</li>
    <li><i class=”icon-caret-right”></i>List item</li>
    <li><i class=”icon-caret-right”></i>List item
    <ul>
    <li><i class=”icon-caret-right”></i>Nested List Item</li>
    <li><i class=”icon-caret-right”></i>Nested List Item</li>
    <li><i class=”icon-caret-right”></i>Nested List Item</li>
    </ul>
    </li>
    <li><i class=”icon-caret-right”></i>List item</li>
    <li><i class=”icon-caret-right”></i>List item</li>
    <li><i class=”icon-caret-right”></i>List item</li>
    [/list]

    Add one of this classes to the ul depending of what list style you wish: disc, circle, square, type1, type2, type3, inline-list

    [/row]
    [row]

    Ordered lists

    [olist]

  • Regular label can be achieved by adding the class .label to any element.
  • Regular label can be achieved by adding the class .label to any element.
  • Regular label can be achieved by adding the class .label to any element.
  • Regular label can be achieved by adding the class .label to any element.

    • [/olist]

    How?

    [olist]
    <li>Regular label can be achieved by adding the class .label to any element.</li>
    <li>Regular label can be achieved by adding the class .label to any element.</li>
    <li>Regular label can be achieved by adding the class .label to any element.</li>
    <li>Regular label can be achieved by adding the class .label to any element.</li>
    [/olist]

    [/row]