Lists

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Default Lists”}

Here are some examples of the default List Styles.

{spacer height=”20px”} {row} {col4} {list} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Consectetur adipiscing elit{/listing} {listing}Integer molestie lorem at massa{/listing} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {ol-list} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Consectetur adipiscing elit{/listing} {listing}Integer molestie lorem at massa{/listing} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Nulla volutpat aliquam velit{/listing} {/ol-list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-check-square fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-check-square fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-check-square fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-check-square fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-check-square fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {/row} {toggle1 title=”Shortcode”}

{list}   {listing}List Item{/listing}   {listing}List Item{/listing}   {listing}List Item{/listing} {/list} 

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Using Icons from Font Awesome”}

Here are some examples of the default List Styles with Icons from Font Awesome, more then 360 are available.

{spacer height=”20px”} {row} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-check-circle color-theme fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-check-circle color-theme fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-check-circle color-theme fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-check-circle color-theme fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-check-circle color-theme fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-star color-orange fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-star color-orange fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-star color-orange fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-star color-orange fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-star color-orange fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-arrow-right color-danger fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-arrow-right color-danger fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-arrow-right color-danger fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-arrow-right color-danger fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-arrow-right color-danger fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {/row} {spacer height=”40px”} {row} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-caret-square-o-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-caret-square-o-right fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-caret-square-o-right fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-caret-square-o-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-caret-square-o-right fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-file-text-o fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-file-text-o fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-file-text-o fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-file-text-o fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-file-text-o fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-rocket fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-rocket fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-rocket fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-rocket fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-rocket fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {/row} {spacer height=”40px”} {row} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-long-arrow-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-long-arrow-right fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-long-arrow-right fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-long-arrow-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-long-arrow-right fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-caret-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-caret-right fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-caret-right fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-caret-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-caret-right fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-angle-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-angle-right fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-angle-right fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-angle-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-angle-right fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {/row} {toggle1 title=”Shortcode”}

{list type="fa-ul"}   {listing}{icon name="fa-rocket fa-li"}List Item{/listing}   {listing}{icon name="fa-rocket fa-li"}List Item{/listing}   {listing}{icon name="fa-rocket fa-li"}List Item{/listing} {/list} 

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Ordered Lists”}

Here are some examples of the ordered List Styles.

{spacer height=”20px”} {row} {col6} {ol-list type=”rounded-list”} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Consectetur adipiscing elit{/listing} {listing}Integer molestie lorem at massa{/listing} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Nulla volutpat aliquam velit{/listing} {/ol-list} {/col} {col6} {ol-list type=”rectangle-list”} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Consectetur adipiscing elit{/listing} {listing}Integer molestie lorem at massa{/listing} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Nulla volutpat aliquam velit{/listing} {/ol-list} {/col} {/row} {toggle1 title=”Shortcode”}

{ol-list type="rounded-list"}   {listing}<a href="#">List Item</a>{/listing}   {listing};<a href="#">List Item</a>{/listing}   {listing};<a href="#">List Item</a>{/listing} {/ol-list} 

{/toggle} {toggle1 title=”Shortcode”}

{ol-list type="rectangle-list"}   {listing}<a href="#">List Item</a>{/listing}   {listing};<a href="#">List Item</a>{/listing}   {listing};<a href="#">List Item</a>{/listing} {/ol-list} 

{/toggle}

Posted on by GM in Elements Leave a comment

Add a Comment