Component: table view

Use a table view to group data.

Table titles

<h3 class="cl-table-title">table title</h3>

Grouped table view (default with .cl-view-all)

<div class="cl-table">
  <div class="cl-table-cell">
    <a href="#">
      <span class="label">Item 1</span>
    </a>
  </div>
  <div class="cl-table-cell">
    <a href="#">
      <span class="label">Item 2</span>
    </a>
  </div>
  <div class="cl-view-all">
    <a href="#">View all</a>
  </div>
</div>

Grouped table view with disclosure arrows

  <div class="cl-table">
    <div class="cl-table-cell">
      <a href="#">
        <span class="label">Item 1</span>
        <i class="icon icon-ios-arrow-right"></i>
      </a>
    </div>
    <div class="cl-table-cell">
      <a href="#">
        <span class="label">Item 2</span>
        <i class="icon icon-ios-arrow-right"></i>
      </a>
    </div>
  </div>

Grouped table view with disclosure arrows and help text near disclosure

<div class="cl-table">
  <div class="cl-table-cell">
    <a href="#">
      <i class="icon icon-ios-arrow-right"></i>
      <span class="label">Item 1</span>
      <span class="disclosure-help">Note</span>
    </a>
  </div>
  <div class="cl-table-cell">
    <a href="#">
      <i class="icon icon-ios-arrow-right"></i>
      <span class="label">Item 2</span>
      <span class="disclosure-help">Note</span>
    </a>
  </div>
</div>

Grouped table view with icons in front of labels

<div class="cl-table">
  <div class="cl-table-cell">
    <a href="#">
      <i class="icon icon-ios-square"></i>
      <span class="label">Item 1</span>
      <i class="icon icon-ios-arrow-right"></i>
    </a>
  </div>
</div>

Table view (extended)

<div class="cl-table__extended">
  <div class="cl-table-cell">
    <a href="#">
      <span class="label">Item 1</span>
    </a>
  </div>
</div>
Bell 20:49 3G
20:49
Back

Table view

Grouped table view (default)

Grouped table view with disclosure arrows (iOS style)

Grouped table view with disclosure arrows and help text near disclosure

Grouped table view with icons in front of labels

Table view (extended)