List items

List items have been designed to replace table elements, overcoming their limitations, when displaying lists of items that contain data that are not directly comparable. Table elements are often used as a quick solution to lay out lists of items that do not necessarily hold comparable data, like a list of users. It is almost certain that mosts lists of items might include comparable data that could be structured inside a table, however, tables are considered obsolete in modern interface design, due to the limited flexibility of the tables to adapt to various screen sizes when they hold items with too many columns or with additional functionality, like multi-selection or per-row actions.

• List item component
• List items with categorical colors
• List items with contextual colors
• List item actions
  • List item actions importance
  • List item with large number of actions
• Clickable list items
• Selectable list-items

List item component

A list item is a hybrid between a block and a table - it is divided vertically in columns to separate content from functionality, but all content is rendered inline or stacked vertically inside its respective content column depending on the use-case and the volume of the content. At small screen resolution tiers, the actions column is stacked vertically under the content column.

An optional icon column that consists of a service icon has been developed to accelerate the design process of product list item. Available services icons can be found in the PCCW Global icons section.

Code output

HTML Markup

Copy<div class="list-item">
  <div class="list-item-icon">  <!--optional icon column-->
    <i class="sky-icon-services-security"></i>
  </div>
  <div class="list-item-desc">
    <h4>List item title - <small>List item subtitle</small></h4>
    <p>List item property: <strong>value</strong>, List item property: <strong>value</strong></p>
  </div>
  <div class="list-item-actions">
    <a href="#" class="btn btn-sm">Edit</a>
    <a href="#" class="btn btn-sm">Delete</a>
  </div>
</div>

List items with categorical colors

List items can make use of the categorical color scale by using classes list-item-categorical-{value} where value is a number from 1-10 based on the categorical color scale.

Copy<div class="list-item list-item-categorical-1">
  <...>
</div>

Copy<div class="list-item list-item-categorical-2">
  <...>
</div>

Copy<div class="list-item list-item-categorical-3">
  <...>
</div>

Copy<div class="list-item list-item-categorical-4">
  <...>
</div>

Copy<div class="list-item list-item-categorical-5">
  <...>
</div>

Copy<div class="list-item list-item-categorical-6">
  <...>
</div>

Copy<div class="list-item list-item-categorical-7">
  <...>
</div>

Copy<div class="list-item list-item-categorical-8">
  <...>
</div>

Copy<div class="list-item list-item-categorical-9">
  <...>
</div>

Copy<div class="list-item list-item-categorical-10">
  <...>
</div>

List items with contextual colors

List items can make use of contextual colors by using one of the 3 classes list-item-error, list-item-warning or list-item-success depending on the use case.

Copy<div class="list-item list-item-error">
  <...>
</div>

Copy<div class="list-item list-item-warning">
  <...>
</div>

Copy<div class="list-item list-item-success">
  <...>
</div>

List item actions

List item might contain a large number of actions, large action label descriptions or actions with a different level of significance or usage frequency.

List item actions importance

Important action buttons should always be visible and if they are mixed with buttons of lower significance they should be differentiated by using the appropriate button styling.

Code output

HTML Markup

Copy<div class="list-item">
<div class="list-item-desc">
  <h4>List item title - <small>List item subtitle</small></h4>
  <p>List item property: <strong>value</strong>, List item property: <strong>value</strong></p>
</div>
<div class="list-item-actions">
  <a href="#" class="btn btn-sm">Delete</a>
  <a href="#" class="btn btn-main btn-sm">Checkout</a>
</div>
</div>

List item with large number of actions

Large number of actions - more than 3 - and/or large action label descriptions consume more space from the list-item content space. Depending on the use-case and depending on the content and action buttons it is encouraged to use a dropdown that will include the additional actions. Actions with greater significance should always be visible and differentiated compared to less significant actions. It is good practice for the dropdown to include actions that are not used frequently or are of less importance.

Code output

HTML Markup

Copy<div class="list-item">
<div class="list-item-desc">
  <h4>List item title - <small>List item subtitle</small></h4>
  <p>List item property: <strong>value</strong>, List item property: <strong>value</strong>, List item property: <strong>value</strong>, List item property: <strong>value</strong>, List item property: <strong>value</strong>, List item property: <strong>value</strong></p>
</div>
<div class="list-item-actions">
  <a href="#" class="btn btn-sm">Review</a>
  <a href="#" class="btn btn-sec btn-sm">Configure</a>
  <div class="dropdown">
    <button class="btn btn-sm btn-dropdown-toggle" data-toggle="dropdown">More</button>
    <ul class="dropdown-menu dropdown-right">
      <li><a href=#>Request firm quote</a></li>
      <li><a href=#>View invoice</a></li>
      <li><a href=#>Checkout</a></li>
      <li><a href=#>Delete</a></li>
      <li class="cancel"><button>Cancel</button></li>
    </ul>
  </div>
</div>
</div>

Clickable list item

List items can use their content to trigger navigation links or actions simply by adding an a tag as the first child descendant of the list-item-desc class. The action/navigation link should be manually added on this tag; it is recommended to use the most commonly used action for each list item depending on the use-case. This implementation allows for additional action functionality to exist inside the list item description column, as shown below.

Code output

HTML Markup

Copy<div class="list-item">
<div class="list-item-icon">
  <i class="sky-icon-services-security"></i>
</div>
<div class="list-item-desc">
  <a class="list-item-content-link" href="#"></a> <!--list item content link -->
  <h4>List item title - <small>List item subtitle</small></h4>
  <p>List item property: <strong>value</strong>, List item property: <strong>value</strong></p>
  <p><a href="/">Sky Framework home</a>
</div>
<div class="list-item-actions">
  <a href="#" class="btn btn-sm">Edit</a>
  <a href="#" class="btn btn-sm">Delete</a>
</div>
</div>

Selectable list items

List items can be selected depending on the use-case to allow bulk action functionalities. Selectable list items should always be accompanied by the necessary sticky header to promote bulk functionality, especially at small screen resolution tiers. The sticky header follows the document flow to constantly be visible when required.

By replacing the class list-item-content-link with list-item-toggle on the a tag, makes the

Code output

HTML Markup

Copy<div class="sticky-rail sticky-header-rail">
<div class="sticky-header sticky">
  <div class="sticky-header-checkbox">
    <label class="custom-checkbox form-control-inline">
    <input id="checkall" type="checkbox" value="checkboxall">
    <span><strong class="checkno">0</strong> items</span>
    </label>
  </div>
  <div class="sticky-header-actions">
    <a href=# id="multi-action" class="btn btn-sm btn-main" disabled>Multi-item delete</a>
  </div>
</div>
<div class="list-item">
  <div class="list-item-checkbox">
    <label class="custom-checkbox no-label">
    <input type="checkbox" value="checkbox1">
    <span></span>
    </label>
  </div>
  <div class="list-item-icon">
    <i class="sky-icon-services-security"></i>
  </div>
  <div class="list-item-desc">
    <a class="list-item-toggle"></a>
    <h4>List item title - <small>List item subtitle</small></h4>
    <p>List item property: <strong>value</strong>, List item property: <strong>value</strong></p>
  </div>
  <div class="list-item-actions">
    <a href="#" class="btn btn-sm">Edit</a>
    <a href="#" class="btn btn-sm">Delete</a>
  </div>
</div>
<...>
</div>