List

Click to preview the List demo. View demo

Unordered

Code:

<ul>
  <li>Lorem ipsum dolor sit amet ornare adipiscing</li>
  <li>Second item non metus enimvitae tristique pulvinar aliquet</li>
  <li>Sublist vitae metus an vitae sapien</li>
  <li>Third item egestas
    <ul>
      <li>Phasellus vitae metus vitae sapien commodo, vehicula</li>
      <li>Vestibulum ante ipsum primis in faucib</li>
      <li>Proin elit arcu, rutrum commodoullamcorper leo</li>
    </ul>
  </li>
  <li>Donec sollicitudin mi sit amet mauris sed magna</li>
</ul>

<ol>
  <li>Lorem ipsum dolor sit amet ornare adipiscing</li>
  <li>Second item non metus enimvitae tristique pulvinar aliquet</li>
  <li>Sublist vitae metus an vitae sapien</li>
  <li>Phasellus vitae metus vitae sapien commodo, vehicula</li>
  <li>Vestibulum ante ipsum primis in faucib</li>
  <li>Proin elit arcu, rutrum commodoullamcorper leo</li>
  <li>Third item egestas</li>
  <li>Donec sollicitudin mi sit amet mauris sed magna</li>
</ol>

Ordered List Style 01

Code:

<ol class="list-ordened">
  <li>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li>Second item non metus enimvitae tristi rabitur</li>
  <li>Sublist vitae metus vitae sapien pharetra an elementum</li>
  <li>Phasellus vitae metus vitae sapien ullamcorper</li>
  <li>Vestibulum ante ipsum primis in faucibus aliquet masem</li>
  <li>Proin elit arcu, rutrum commodo tristique tempus</li>
  <li>Third item egestas quis viverra a blandit pede varius.</li>
  <li>Donec sollicitudin mi sit amet mauris sollicitudin mi sit amet</li>
</ol>
<ol class="list-ordened2">
  <li>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li>Second item non metus enimvitae tristi rabitur</li>
  <li>Sublist vitae metus vitae sapien pharetra an elementum</li>
  <li>Phasellus vitae metus vitae sapien ullamcorper</li>
  <li>Vestibulum ante ipsum primis in faucibus aliquet masem</li>
  <li>Proin elit arcu, rutrum commodo tristique tempus</li>
</ol>
<ol class="list-ordened3">
  <li>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li>Second item non metus enimvitae tristi rabitur</li>
  <li>Sublist vitae metus vitae sapien pharetra an elementum</li>
  <li>Phasellus vitae metus vitae sapien ullamcorper</li>
  <li>Vestibulum ante ipsum primis in faucibus aliquet masem</li>
  <li>Proin elit arcu, rutrum commodo tristique tempus</li>
</ol>

Ordered List Style 02

Code:

<dl>
  <dt>Exclusive style switcher</dt>
  <dd>Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo.</dd>
  <dt>High-resolution on different devices</dt>
  <dd>Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat.</dd>
  <dt>Different home versions</dt>
  <dd>Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristi que tempus lectus, porttitor ac elementum luctus.</dd>
</dl>

Description

Code:

<dl class="dl-horizontal">
  <dt>Exclusive style switcher</dt>
  <dd>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula elei adipiscing. Duis orci.</dd>
  <dt>Organized extension</dt>
  <dd>Donec sollicitudin mi sit amet mauris. Nam elementum quam ullam ante. Etiam aliquet massa et lorem.</dd>
  <dt>Different Home versions</dt>
  <dd>Mauris dapibus lacus auctor risus. Duis aliquam molestie erat.</dd>
  <dt>Customized search box</dt>
  <dd>Nunc ornare adipiscing orci eu consectetur. Ut justo libero,Morbi at mauris eu mauris facilisis sollicitudin.</dd>
  <dt>New user interface</dt>
  <dd>Phasellus consectetur laoreet fringilla. Nulla molestie pulvinar aliquet. Donec non metus enim, Proin vitae tristiqu.</dd>
</dl>

Horizontal Definition Lists

Code:

<ul class="list-inline">
  <li>Home</li>
  <li>Portfolios</li>
  <li>About Us</li>
  <li>Our Products</li>
  <li>Features</li>
  <li>Blog</li>
  <li>Contact Us</li>
</ul>

Inline

Code:

<ul class="list-ico ico-sm">
  <li><i class="fa fa-volume-off"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-volume-off"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-volume-off"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>
<ul class="list-ico2 ico-sm">
  <li><i class="fa fa-volume-off"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-volume-off"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-volume-off"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>
<ul class="list-ico3 ico-sm">
  <li><i class="fa fa-volume-off"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-volume-off"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-volume-off"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>

Icon List Style 01

Code:

<ul class="list-ico">
  <li><i class="fa fa-bell"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-phone"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-asterisk"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>
<ul class="list-ico2">
  <li><i class="fa fa-bell"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-phone"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-asterisk"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>
<ul class="list-ico3">
  <li><i class="fa fa-bell"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-phone"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-asterisk"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>

Icon List Style 02

Code:

<ul class="list-ico ico-lg">
  <li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-check"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-check"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>
<ul class="list-ico2 ico-lg">
  <li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-check"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-check"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>
<ul class="list-ico3 ico-lg">
  <li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-check"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-check"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>

Icon List Style 03

Code:

<ul class="list-ico ico-sm list-border-solid">
  <li><i class="fa fa-volume-off"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-volume-off"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-volume-off"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>
<ul class="list-ico2 ico-sm list-border-solid">
  <li><i class="fa fa-volume-off"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-volume-off"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-volume-off"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>
<ul class="list-ico3 ico-sm list-border-dashed">
  <li><i class="fa fa-volume-off"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-volume-off"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-volume-off"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>

Icon list with septal line style 01

Code:

<ul class="list-ico list-border-solid">
  <li><i class="fa fa-bell"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-phone"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-asterisk"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>
<ul class="list-ico2 list-border-solid">
  <li><i class="fa fa-bell"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-phone"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-asterisk"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>
<ul class="list-ico3 list-border-dashed">
  <li><i class="fa fa-bell"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-phone"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-asterisk"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>

Icon list with septal line style 02

Code:

<ul class="list-ico ico-lg list-border-solid">
  <li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-check"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-check"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>

<ul class="list-ico2 ico-lg list-border-solid">
  <li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-check"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-check"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>
<ul class="list-ico3 ico-lg list-border-dashed">
  <li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-check"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-check"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
</ul>

Icon list with septal line style 03

Code:

<ul class="list-ico">
  <li><i class="fa fa-bell color-accent"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li><i class="fa fa-phone color-primary"></i>Second item non metus enimvitae tristi rabitur</li>
  <li><i class="fa fa-asterisk color-success"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
  <li><i class="fa fa-crosshairs color-info"></i>Vestibulum ante ipsum primis in faucibus aliquet masem</li>
  <li><i class="fa fa-forumbee color-warning"></i>Proin elit arcu, rutrum commodo tristique tempus</li>
  <li><i class="fa fa-power-off color-danger"></i>Donec sollicitudin mi sit amet mauris sollicitudin mi sit amet</li>
</ul>

Icon list in different colors style 01

Code:

<ul class="list-ico2">
  <li class="color-accent"><i class="fa fa-bell"></i>Lorem ipsum dolor sit amet egestas quis viverra a blandit</li>
  <li class="color-primary"><i class="fa fa-phone color-primary border-primary"></i>Second item non metus enimvitae tristi rabitur</li>
  <li class="color-success"><i class="fa fa-asterisk color-success border-success"></i>Sublist vitae metus vitae sapien pharetra an elementum</li>
  <li class="color-info"><i class="fa fa-crosshairs color-info border-info"></i>Vestibulum ante ipsum primis in faucibus aliquet masem</li>
  <li class="color-warning"><i class="fa fa-forumbee color-warning border-warning"></i>Proin elit arcu, rutrum commodo tristique tempus</li>
  <li class="color-danger"><i class="fa fa-power-off color-danger border-danger"></i>Donec sollicitudin mi sit amet mauris sollicitudin mi sit amet</li>
</ul>