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

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

List item title - List item subtitle

List item property: value, List item property: value

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>
It is encouraged to use list item icons only in service list items that belong to different categories; it is suggested to avoid repetition of the same icon in products that belong to a common category.

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.

List item title - List item subtitle

List item property: value, List item property: value

List item title - List item subtitle

List item property: value, List item property: value

List item title - List item subtitle

List item property: value, List item property: value

List item title - List item subtitle

List item property: value, List item property: value

List item title - List item subtitle

List item property: value, List item property: value

List item title - List item subtitle

List item property: value, List item property: value

List item title - List item subtitle

List item property: value, List item property: value

List item title - List item subtitle

List item property: value, List item property: value

List item title - List item subtitle

List item property: value, List item property: value

List item title - List item subtitle

List item property: value, List item property: value

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.

List item title - List item subtitle

List item property: value, List item property: value

List item title - List item subtitle

List item property: value, List item property: value

List item title - List item subtitle

List item property: value, List item property: value

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

List item title - List item subtitle

List item property: value, List item property: value

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.

To make the dropdpown menu more functional in mobile devices, is is positioned differently at small resolution tiers. To promote this functionality, an additional list item for the dropdown menu - visible only at extra small resolution tiers - is included to close the dropdown-menu.
Code output

List item title - List item subtitle

List item property: value, List item property: value, List item property: value, List item property: value, List item property: value, List item property: value

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

List item title - List item subtitle

List item property: value, List item property: value

Sky Framework home

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

List item title - List item subtitle

List item property: value, List item property: value

List item title - List item subtitle

List item property: value, List item property: value

List item title - List item subtitle

List item property: value, List item property: value

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>