Contacts List

Contacts lists indended to display list of personal people contacts.

Contacts list is a particular case of grouped List View with one difference.

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

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">
58. <div class="item-title">Alexander</div>
59. </div>
60. </div>
61. </li>
62. </ul>
63. </div>
64. <div class="list-group">
65. <ul>
66. <li class="list-group-title">B</li>
67. <li>
68. <div class="item-content">
69. <div class="item-inner">
70. <div class="item-title">Bailey</div>
71. </div>
72. </div>
73. </li>
74. <li>
75. <div class="item-content">
76. <div class="item-inner">
77. <div class="item-title">Barclay</div>
78. </div>
79. </div>
80. </li>
81. <li>
82. <div class="item-content">
83. <div class="item-inner">
84. <div class="item-title">Bartolo</div>
85. </div>
86. </div>
87. </li>
88. <li>
89. <div class="item-content">
90. <div class="item-inner">
91. <div class="item-title">Bellamy</div>
92. </div>
93. </div>
94. </li>
95. <li>
96. <div class="item-content">
97. <div class="item-inner">
98. <div class="item-title">Belle</div>
99. </div>
100. </div>
101. </li>
102. <li>
103. <div class="item-content">
104. <div class="item-inner">
105. <div class="item-title">Benjamin</div>
106. </div>
107. </div>
108. </li>
109. </ul>
110. </div>
111. <div class="list-group">
112. <ul>
113. <li class="list-group-title">C</li>
114. <li>
115. <div class="item-content">
116. <div class="item-inner">
117. <div class="item-title">Caiden</div>
118. </div>
119. </div>
120. </li>
121. <li>
122. <div class="item-content">
123. <div class="item-inner">
124. <div class="item-title">Calvin</div>
125. </div>
126. </div>
127. </li>
128. <li>
129. <div class="item-content">
130. <div class="item-inner">
131. <div class="item-title">Candy</div>
132. </div>
133. </div>
134. </li>
135. <li>
136. <div class="item-content">
137. <div class="item-inner">
138. <div class="item-title">Carl</div>
139. </div>
140. </div>
141. </li>
142. <li>
143. <div class="item-content">
144. <div class="item-inner">
145. <div class="item-title">Cherilyn</div>
146. </div>
147. </div>
148. </li>
149. <li>
150. <div class="item-content">
151. <div class="item-inner">
152. <div class="item-title">Chester</div>
153. </div>
154. </div>
155. </li>
156. <li>
157. <div class="item-content">
158. <div class="item-inner">
159. <div class="item-title">Chloe</div>
160. </div>
161. </div>
162. </li>
163. </ul>
164. </div>
165. <div class="list-group">
166. <ul>
167. <li class="list-group-title">V</li>
168. <li>
169. <div class="item-content">
170. <div class="item-inner">
171. <div class="item-title">Vladimir</div>
172. </div>
173. </div>
174. </li>
175. </ul>
176. </div>
177. </div>
178. </div>