Content list

Introduction

On the main content, you may want to have a list of items displayed (like the contacts, or the mail app). We provide a standardized structure for this specific purpose.

Basic layout

Content list screenshot

  1. <div id="app-content-wrapper">
  2.     <div class="app-content-list">
  3.         <a href="#" class="app-content-list-item">
  4.             <input type="checkbox" id="test1" class="app-content-list-item-checkbox checkbox" checked="checked"><label for="test1"></label>
  5.             <div class="app-content-list-item-icon" style="background-color: rgb(231, 192, 116);">C</div>
  6.             <div class="app-content-list-item-line-one">Contact 1</div>
  7.             <div class="icon-delete"></div>
  8.         </a>
  9.         <a href="#" class="app-content-list-item">
  10.             <div class="app-content-list-item-star icon-starred"></div>
  11.             <div class="app-content-list-item-icon" style="background-color: rgb(151, 72, 96);">T</div>
  12.             <div class="app-content-list-item-line-one">Favourited task #2</div>
  13.             <div class="icon-more"></div>
  14.         </a>
  15.         <a href="#" class="app-content-list-item">
  16.             <div class="app-content-list-item-icon" style="background-color: rgb(152, 59, 144);">T</div>
  17.             <div class="app-content-list-item-line-one">Task #2</div>
  18.             <div class="icon-more"></div>
  19.         </a>
  20.         <a href="#" class="app-content-list-item">
  21.             <div class="app-content-list-item-icon" style="background-color: rgb(31, 192, 216);">M</div>
  22.             <div class="app-content-list-item-line-one">Important mail is very important! Don't ignore me</div>
  23.             <div class="app-content-list-item-line-two">Hello there, here is an important mail from your mom</div>
  24.         </a>
  25.         <a href="#" class="app-content-list-item">
  26.             <div class="app-content-list-item-icon" style="background-color: rgb(41, 97, 156);">N</div>
  27.             <div class="app-content-list-item-line-one">Important mail with a very long subject</div>
  28.             <div class="app-content-list-item-line-two">Hello there, here is an important mail from your mom</div>
  29.             <span class="app-content-list-item-details">8 hours ago</span>
  30.             <div class="icon-delete"></div>
  31.         </a>
  32.         <a href="#" class="app-content-list-item">
  33.             <div class="app-content-list-item-icon" style="background-color: rgb(141, 197, 156);">N</div>
  34.             <div class="app-content-list-item-line-one">New contact</div>
  35.             <div class="app-content-list-item-line-two">blabla@bla.com</div>
  36.             <div class="icon-delete"></div>
  37.         </a>
  38.     </div>
  39.     <div class="app-content-detail">
  40.     </div>
  41. </div>

Rules and information

  • You need to have the following structure for your global content:
  1. <div id="app-content-wrapper">
  2.     <div class="app-content-list">HERE YOUR CONTENT LIST</div>
  3.     <div class="app-content-detail">HERE YOUR GLOBAL CONTENT</div>
  4. </div>
  • The first code/screenshot example show all the combination allowed/available.
  • When displaying the checkbox, the star will automatically be hidden.
  • The checkboxes are hidden by default. They’re shown when checked or when hover/focus/active
  • If you want to show all the checkboxes, apply the selection class to the app-content-list.

  • You can NOT have more than one button in an entry. You need to create a popover menu if multiple options are needed.

    • In case of a popovermenu, see the popover menu.
    • As always, the JS is still needed to toggle the open class on this menu

  • If you use the app-content-list standard, the app-content-details div will be hidden in mobile mode (full screen). You will need to add the showdetails class to the app-content-list to show the main content. On mobile view, the whole list/details section (depending on which is shown) will scroll the body.

Popovermenu in item

If you need a menu inside an item, you need to wrap it with the icon-more div inside a app-content-list-menu div.

Content list with menu

  1. <div class="app-content-list-item-menu">
  2.     <div class="icon-more"></div>
  3.     <div class="popovermenu">
  4.         <ul>
  5.             <li>
  6.                 <a href="#" class="icon-details">
  7.                     <span>Details</span>
  8.                 </a>
  9.             </li>
  10.             <li>
  11.                 <button class="icon-details">
  12.                     <span>Details</span>
  13.                 </button>
  14.             </li>
  15.             <li>
  16.                 <button>
  17.                     <span class="icon-details"></span>
  18.                     <span>Details</span>
  19.                 </button>
  20.             </li>
  21.             <li>
  22.                 <a>
  23.                     <span class="icon-details"></span>
  24.                     <span>Details</span>
  25.                 </a>
  26.             </li>
  27.         </ul>
  28.     </div>
  29. </div>