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