List views

Show selectable lists of elements.

Default List view

Basic sample for simple ListView.

  • facebook

    Lorem ipsum sin ut dolorem

  • Twitter

    Lorem ipsum sin ut dolorem

  • Google +

    Lorem ipsum sin ut dolorem

  • Slideshare

    Lorem ipsum sin ut dolorem

<ul class="listview">
  <li>
    <div class="icon">
      <!-- Image or icon -->
    </div>
    <div class="data">
      <h4>Slideshare</h4>
      <p>Lorem ipsum sin ut dolorem</p>
    </div>
  </li>

  <li class="selected">
    <div class="icon">
      <!-- Image or icon -->
    </div>
    <div class="data">
      <h4>Slideshare</h4>
      <p>Lorem ipsum sin ut dolorem</p>
    </div>
  </li>

  <li class="accent">
    <div class="icon">
      <!-- Image or icon -->
    </div>
    <div class="data">
      <h4>Slideshare</h4>
      <p>Lorem ipsum sin ut dolorem</p>
    </div>
  </li>

  <li class="light">
    <div class="icon">
      <!-- Image or icon -->
    </div>
    <div class="data">
      <h4>Slideshare</h4>
      <p>Lorem ipsum sin ut dolorem</p>
    </div>
  </li>
</ul>

List view Fluid

  • facebook

    Lorem ipsum sin ut dolorem

  • Twitter

    Lorem ipsum sin ut dolorem

  • Google +

    Lorem ipsum sin ut dolorem

  • Slideshare

    Lorem ipsum sin ut dolorem

<ul class="listview fluid">
  ...
</ul>

List view Iconic

  • Youtube

    Lorem ipsum sin ut dolorem

  • Picasa

    Lorem ipsum sin ut dolorem

  • Foursquare

    Lorem ipsum sin ut dolorem

<ul class="listview iconic">
  ...
</ul>