Contacts List

    Contacts lists indended to display list of personal people contacts.

    The only difference is what we nedd to add additional class to the list view element (<div class="list">)

    Note that commented variables are not specified by default and their values is what they fallback to in this case.

    Example

    1. <div class="page-content">
    2.   <div class="list contacts-list">
    3.     <div class="list-group">
    4.       <ul>
    5.         <li class="list-group-title">A</li>
    6.         <li>
    7.           <div class="item-content">
    8.             <div class="item-inner">
    9.               <div class="item-title">Aaron </div>
    10.             </div>
    11.           </div>
    12.         </li>
    13.         <li>
    14.           <div class="item-content">
    15.             <div class="item-inner">
    16.               <div class="item-title">Abbie</div>
    17.             </div>
    18.           </div>
    19.         </li>
    20.         <li>
    21.           <div class="item-content">
    22.             <div class="item-inner">
    23.               <div class="item-title">Adam</div>
    24.             </div>
    25.           </div>
    26.         </li>
    27.         <li>
    28.           <div class="item-content">
    29.             <div class="item-inner">
    30.               <div class="item-title">Adele</div>
    31.             </div>
    32.           </div>
    33.         </li>
    34.         <li>
    35.           <div class="item-content">
    36.             <div class="item-inner">
    37.               <div class="item-title">Agatha</div>
    38.             </div>
    39.           </div>
    40.         </li>
    41.         <li>
    42.           <div class="item-content">
    43.             <div class="item-inner">
    44.               <div class="item-title">Agnes</div>
    45.             </div>
    46.           </div>
    47.         </li>
    48.         <li>
    49.           <div class="item-content">
    50.             <div class="item-inner">
    51.               <div class="item-title">Albert</div>
    52.             </div>
    53.           </div>
    54.         </li>
    55.         <li>
    56.           <div class="item-content">
    57.             <div class="item-inner">
    59.           </div>
    60.         </li>
    61.       </ul>
    62.     </div>
    63.     <div class="list-group">
    64.       <ul>
    65.         <li class="list-group-title">B</li>
    66.         <li>
    67.           <div class="item-content">
    68.             <div class="item-inner">
    69.               <div class="item-title">Bailey</div>
    70.             </div>
    71.           </div>
    72.         </li>
    73.         <li>
    74.           <div class="item-content">
    75.             <div class="item-inner">
    76.               <div class="item-title">Barclay</div>
    77.             </div>
    78.           </div>
    79.         </li>
    80.         <li>
    81.           <div class="item-content">
    82.             <div class="item-inner">
    83.               <div class="item-title">Bartolo</div>
    84.             </div>
    85.           </div>
    86.         </li>
    87.         <li>
    88.           <div class="item-content">
    89.             <div class="item-inner">
    90.               <div class="item-title">Bellamy</div>
    91.             </div>
    92.           </div>
    93.         </li>
    94.         <li>
    95.           <div class="item-content">
    96.             <div class="item-inner">
    97.               <div class="item-title">Belle</div>
    98.             </div>
    99.           </div>
    100.         </li>
    101.         <li>
    102.           <div class="item-content">
    103.             <div class="item-inner">
    104.               <div class="item-title">Benjamin</div>
    105.             </div>
    106.           </div>
    107.         </li>
    108.       </ul>
    109.     </div>
    110.     <div class="list-group">
    111.       <ul>
    112.         <li class="list-group-title">C</li>
    113.         <li>
    114.           <div class="item-content">
    115.             <div class="item-inner">
    116.               <div class="item-title">Caiden</div>
    118.         </li>
    119.         <li>
    120.           <div class="item-content">
    121.             <div class="item-inner">
    122.               <div class="item-title">Calvin</div>
    123.             </div>
    124.           </div>
    125.         </li>
    126.         <li>
    127.           <div class="item-content">
    128.             <div class="item-inner">
    129.               <div class="item-title">Candy</div>
    130.             </div>
    131.           </div>
    132.         </li>
    133.         <li>
    134.           <div class="item-content">
    135.             <div class="item-inner">
    136.               <div class="item-title">Carl</div>
    137.             </div>
    138.           </div>
    139.         </li>
    140.         <li>
    141.           <div class="item-content">
    142.             <div class="item-inner">
    143.               <div class="item-title">Cherilyn</div>
    144.             </div>
    145.           </div>
    146.         </li>
    147.         <li>
    148.           <div class="item-content">
    149.             <div class="item-inner">
    150.               <div class="item-title">Chester</div>
    151.             </div>
    152.           </div>
    153.         </li>
    154.         <li>
    155.           <div class="item-content">
    156.             <div class="item-inner">
    157.               <div class="item-title">Chloe</div>
    158.             </div>
    159.           </div>
    160.         </li>
    161.       </ul>
    162.     </div>
    163.     <div class="list-group">
    164.       <ul>
    165.         <li class="list-group-title">V</li>
    166.         <li>
    167.           <div class="item-content">
    168.             <div class="item-inner">
    169.               <div class="item-title">Vladimir</div>
    170.             </div>
    171.           </div>
    172.         </li>
    173.       </ul>
    174.     </div>
    175.   </div>