List View - 图1

List View (Table View)

List views are versatile and powerful user interface compontents frequently found in apps. A list view presents data in a scrollable list of multiple rows that may be divided into sections/groups.

List views have many purposes:

  • To let users navigate through hierarchically structured data
  • To present an indexed list of items
  • To display detail information and controls in visually distinct groupings
  • To present a selectable list of options

List View Block

List block is your list view elements wrapper.

So first of all, all your list view elements should be wrapped with <div class="list"> element:

  1. <div class="list">
  2. <ul>
  3. ... list elements here ...
  4. </ul>
  5. </div>

To remove hairlines (thin borders) around list block we need additional no-hairlines class:

  1. <div class="list no-hairlines">
  2. <ul>
  3. ... list elements here ...
  4. </ul>
  5. </div>

To remove hairlines (thin borders) between list items we need additional no-hairlines-between class:

  1. <div class="list no-hairlines-between">
  2. <ul>
  3. ... list elements here ...
  4. </ul>
  5. </div>

To make list block inset we need additional inset class:

  1. <div class="list inset">
  2. <ul>
  3. ... list elements here ...
  4. </ul>
  5. </div>

To make block inset only on large screens we need to use medium-inset (>= 768px) class instead:

  1. <div class="list medium-inset">
  2. <ul>
  3. ... list elements here ...
  4. </ul>
  5. </div>

For full set of such responsive classes check Grid docs. They are xsmall-inset, small-inset, medium-inset, large-inset, xlarge-inset.

List Item

Single list element has pretty complex but flexible layout:

  1. <li>
  2. <div class="item-content">
  3. <div class="item-media">
  4. <i class="icon my-icon"></i>
  5. </div>
  6. <div class="item-inner">
  7. <div class="item-title">
  8. List element title
  9. </div>
  10. <div class="item-after">
  11. List element label
  12. </div>
  13. </div>
  14. </div>
  15. </li>

Where:

  • item-content - main flex wrapper for item-media and item-inner. Requred element.
  • item-media - container for your media element like icon, image, etc. Optional element.

  • item-inner - main flex wrapper for item-title and item-after. Requred element.

  • item-title - single-line list item title. Required element.

  • item-after - list item label. Could countain any additional HTML elements, like label text, or badge, or switch/toggle or button, etc. Optional element.

  • Because .item-content is actually CSS flex-box element, note that item-media and item-inner should be direct children of item-content!

  • For the same reason item-title and item-after should be direct children of item-inner!

Also note that if your list item has nothing additional, you can user item-content class on <li> element:

  1. <li class="item-content">
  2. <div class="item-media">
  3. <i class="icon my-icon"></i>
  4. </div>
  5. <div class="item-inner">
  6. <div class="item-title">
  7. List element title
  8. </div>
  9. <div class="item-after">
  10. List element label
  11. </div>
  12. </div>
  13. </li>

List Item Header/Footer

If we need to add list item header/footer text in addition to item’s title we can use item-header and item-footer elements:

  1. <li>
  2. <div class="item-content">
  3. <div class="item-media">
  4. <i class="icon my-icon"></i>
  5. </div>
  6. <div class="item-inner">
  7. <div class="item-title">
  8. <!-- Item header, must be first child of item-title -->
  9. <div class="item-header">Item header text</div>
  10. List element title
  11. <!-- Item footer, must be last child of item-title -->
  12. <div class="item-footer">Item footer text</div>
  13. </div>
  14. <div class="item-after">...</div>
  15. </div>
  16. </div>
  17. </li>

Link Item

Of course in most cases we need to use list view elements as links () to other pages or data. In this case we need to wrap item-content with <a class="item-link"> element:

  1. <li>
  2. <a href="#" class="item-link">
  3. <div class="item-content">
  4. <div class="item-media">...</div>
  5. <div class="item-inner">...</div>
  6. </div>
  7. </a>
  8. </li>

If your links contains nothing except “item-content” then we can just use link as “item-content”:

  1. <li>
  2. <a href="#" class="item-link item-content">
  3. <div class="item-media">...</div>
  4. <div class="item-inner">...</div>
  5. </a>
  6. </li>

Note that item-inner has additional right padding and chevron icon when it is in item-link

To remove this chevron icon and extra padding, you can add no-chevron class to link item or to containing list

List Button

List button is a simplified list link item, usefule in case you need to trigger simple self-explaining actions:

  1. <li>
  2. <a class="list-button">List Button 1</a>
  3. </li>
  4. <li>
  5. <a class="list-button">List Button 2</a>
  6. </li>

List Divider

List divider is a simple list element with title to visually divide one list items from another:

  1. <li class="item-divider">Divider title here</li>
  1. <div class="list">
  2. <ul>
  3. <!-- List items -->
  4. <li class="item-content">...</li>
  5. <li class="item-content">...</li>
  6. <!-- Divider -->
  7. <li class="item-divider">Divider title here</li>
  8. <!-- Another list items -->
  9. <li class="item-content">...</li>
  10. <li class="item-content">...</li>
  11. </ul>
  12. </div>

Grouped Lists

Sometimes we need to group list view elements inside of single list block. In this case we need to additional list-group elements:

  1. <div class="list">
  2. <!-- First group-->
  3. <div class="list-group">
  4. <ul>
  5. <li class="list-group-title">First group</li>
  6. <li class="item-content">...</li>
  7. <li class="item-content">...</li>
  8. ...
  9. </ul>
  10. </div>
  11. <!-- Second group-->
  12. <div class="list-group">
  13. <ul>
  14. <li class="list-group-title">Second Group</li>
  15. <li class="item-content">...</li>
  16. <li class="item-content">...</li>
  17. ...
  18. </ul>
  19. </div>
  20. </div>

You may ask what is the difference from simple dividers? With list groups, group titles have sticky position during scroll within single group.

Simple List

In case we need list with simple items structure that have only titles, we may use Simple List modification. In this case we need additional class simple-list on list block with plain <li> items layout:

  1. <div class="list simple-list">
  2. <ul>
  3. <li>Item 1</li>
  4. <li>Item 2</li>
  5. <li>Item 3</li>
  6. <li>Item 4</li>
  7. ...
  8. </ul>
  9. </div>

Links List

In case we need list with simple link items structure that have only titles, we may use Links List modification. In this case we need additional class links-list on list block with plain <li><a>...</a></li> items layout:

  1. <div class="list links-list">
  2. <ul>
  3. <li>
  4. <a href="#">Link Item 1</a>
  5. </li>
  6. <li>
  7. <a href="#">Link Item 2</a>
  8. </li>
  9. <li>
  10. <a href="#">Link Item 3</a>
  11. </li>
  12. ...
  13. </ul>
  14. </div>

Media List

Media list view is extended case of List View indended to display more complex data like products, services, users, etc. In this case we need additional media-list class on list block.

And of course it has a bit more complex layout:

  1. <!-- Media list block has additional "media-list" class -->
  2. <div class="list media-list">
  3. <ul>
  4. <li>
  5. <div class="item-content">
  6. <div class="item-media">
  7. <img src="path/to/img.jpg">
  8. </div>
  9. <div class="item-inner">
  10. <div class="item-title-row">
  11. <div class="item-title">Element title</div>
  12. <div class="item-after">Element label</div>
  13. </div>
  14. <div class="item-subtitle">Subtitle</div>
  15. <div class="item-text">Additional description text</div>
  16. </div>
  17. </div>
  18. </li>
  19. </ul>
  20. </div>

Where:

  • item-content - main flex wrapper for item-media and item-inner. Requred element.
  • item-media - container for your media element like icon, image, etc. Optional element.

  • item-inner - Requred element.

  • item-title-row - main flex wrapper for item-title and item-after. Optional element.
  • item-title - single-line list item title. Optional element.

  • item-after - list item label. Could countain any additional HTML elements, like label text, or badge, or switch/toggle or button, etc. Optional element.

  • item-subtitle - additional single-line title. Optional element.

  • item-text - additional two-lines container for detailed description. Optional element.

When you use Link Item (item-link) in media list it will render chevron icon (>) at the level of item-title. If you want to move this chevron to the center of item, then you need to add chevron-center class to this item or to the containing list

Custom Table-like Elements

In you case you need some custom list item layout with table-like structure you may use additional list elements item-row and item-cell:

  1. <li class="item-content">
  2. <div class="item-inner item-cell">
  3. <div class="item-row">
  4. <div class="item-cell">Cell 1-1</div>
  5. <div class="item-cell">Cell 1-2</div>
  6. <div class="item-cell">Cell 1-3</div>
  7. </div>
  8. <div class="item-row">
  9. <div class="item-cell">Cell 2-1</div>
  10. <div class="item-cell">Cell 2-2</div>
  11. </div>
  12. <div class="item-row">
  13. <div class="item-cell">Cell 3-1</div>
  14. <div class="item-cell">
  15. <div class="item-row">
  16. Cell 3-2
  17. </div>
  18. <div class="item-row">
  19. Cell 3-3
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. </li>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

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

  1. :root {
  2. --f7-list-inset-side-margin: 16px;
  3. --f7-list-item-cell-margin: 16px;
  4. --f7-list-item-padding-horizontal: 16px;
  5. --f7-list-media-item-padding-horizontal: 16px;
  6. --f7-list-item-text-max-lines: 2;
  7. --f7-list-chevron-icon-font-size: 20px;
  8. --f7-list-item-title-font-size: inherit;
  9. --f7-list-item-title-font-weight: 400;
  10. --f7-list-item-title-text-color: inherit;
  11. --f7-list-item-title-line-height: inherit;
  12. --f7-list-item-title-white-space: nowrap;
  13. --f7-list-item-subtitle-font-weight: 400;
  14. --f7-list-item-subtitle-text-color: inherit;
  15. --f7-list-item-subtitle-line-height: inherit;
  16. --f7-list-item-text-font-weight: 400;
  17. --f7-list-item-after-font-weight: 400;
  18. --f7-list-item-header-text-color: inherit;
  19. --f7-list-item-header-font-size: 12px;
  20. --f7-list-item-header-font-weight: 400;
  21. --f7-list-item-header-line-height: 1.2;
  22. --f7-list-item-footer-font-size: 12px;
  23. --f7-list-item-footer-font-weight: 400;
  24. --f7-list-item-footer-line-height: 1.2;
  25. --f7-list-button-font-size: inherit;
  26. --f7-list-button-font-weight: 400;
  27. --f7-list-item-divider-line-height: inherit;
  28. --f7-list-group-title-line-height: inherit;
  29. --f7-list-bg-color: #fff;
  30. --f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
  31. }
  32. :root .theme-dark,
  33. :root.theme-dark {
  34. --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
  35. --f7-list-bg-color: #1c1c1d;
  36. --f7-list-border-color: rgba(255, 255, 255, 0.15);
  37. --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
  38. --f7-list-item-divider-border-color: rgba(255, 255, 255, 0.15);
  39. --f7-list-item-divider-bg-color: #232323;
  40. --f7-list-group-title-bg-color: #232323;
  41. --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
  42. }
  43. .ios {
  44. --f7-list-in-list-padding-left: 30px;
  45. --f7-list-inset-border-radius: 8px;
  46. --f7-list-margin-vertical: 35px;
  47. --f7-list-font-size: 17px;
  48. --f7-list-chevron-icon-area: 20px;
  49. --f7-list-border-color: rgba(0, 0, 0, 0.22);
  50. --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
  51. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
  52. --f7-list-item-subtitle-font-size: 15px;
  53. --f7-list-item-text-font-size: 15px;
  54. --f7-list-item-text-line-height: 21px;
  55. --f7-list-item-after-font-size: inherit;
  56. --f7-list-item-after-line-height: inherit;
  57. --f7-list-item-after-padding: 5px;
  58. --f7-list-item-min-height: 44px;
  59. --f7-list-item-media-margin: 16px;
  60. --f7-list-item-media-icons-margin: 5px;
  61. --f7-list-item-padding-vertical: 8px;
  62. --f7-list-media-item-padding-vertical: 10px;
  63. --f7-list-media-item-title-font-weight: 600;
  64. /*
  65. --f7-list-button-text-color: var(--f7-theme-color);
  66. */
  67. --f7-list-button-text-align: center;
  68. --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
  69. --f7-list-item-divider-height: 31px;
  70. --f7-list-item-divider-font-size: inherit;
  71. --f7-list-item-divider-font-weight: 400;
  72. --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
  73. --f7-list-item-divider-border-color: rgba(0, 0, 0, 0.22);
  74. --f7-list-group-title-height: 31px;
  75. --f7-list-group-title-font-size: inherit;
  76. --f7-list-group-title-font-weight: 400;
  77. --f7-list-group-title-bg-color: #f7f7f7;
  78. --f7-list-item-after-text-color: rgba(0, 0, 0, 0.45);
  79. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
  80. --f7-list-item-text-text-color: rgba(0, 0, 0, 0.45);
  81. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.45);
  82. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
  83. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.15);
  84. }
  85. .ios .theme-dark,
  86. .ios.theme-dark {
  87. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
  88. --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
  89. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
  90. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.55);
  91. --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.55);
  92. --f7-list-group-title-text-color: rgba(255, 255, 255, 0.55);
  93. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
  94. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.08);
  95. }
  96. .md {
  97. --f7-list-in-list-padding-left: 40px;
  98. --f7-list-inset-border-radius: 4px;
  99. --f7-list-margin-vertical: 32px;
  100. --f7-list-font-size: 16px;
  101. --f7-list-chevron-icon-area: 26px;
  102. --f7-list-border-color: rgba(0, 0, 0, 0.12);
  103. --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
  104. --f7-list-item-subtitle-font-size: 14px;
  105. --f7-list-item-text-font-size: 14px;
  106. --f7-list-item-text-line-height: 20px;
  107. --f7-list-item-after-font-size: 14px;
  108. --f7-list-item-after-line-height: inherit;
  109. --f7-list-item-after-padding: 8px;
  110. --f7-list-item-min-height: 48px;
  111. --f7-list-item-media-margin: 16px;
  112. --f7-list-item-media-icons-margin: 8px;
  113. --f7-list-item-padding-vertical: 8px;
  114. --f7-list-media-item-padding-vertical: 14px;
  115. /*
  116. --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
  117. */
  118. --f7-list-button-text-align: left;
  119. --f7-list-button-border-color: transparent;
  120. --f7-list-item-divider-height: 48px;
  121. --f7-list-item-divider-font-size: 14px;
  122. --f7-list-item-divider-font-weight: 400;
  123. --f7-list-item-divider-bg-color: #f4f4f4;
  124. --f7-list-item-divider-border-color: transparent;
  125. --f7-list-group-title-height: 48px;
  126. --f7-list-group-title-font-size: 14px;
  127. --f7-list-group-title-font-weight: 400;
  128. --f7-list-group-title-bg-color: #f4f4f4;
  129. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
  130. --f7-list-item-text-text-color: rgba(0, 0, 0, 0.54);
  131. --f7-list-item-after-text-color: rgba(0, 0, 0, 0.54);
  132. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
  133. --f7-list-button-text-color: #212121;
  134. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  135. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
  136. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
  137. }
  138. .md .theme-dark,
  139. .md.theme-dark {
  140. --f7-list-button-text-color: #fff;
  141. --f7-list-item-divider-text-color: #fff;
  142. --f7-list-group-title-text-color: #fff;
  143. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
  144. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
  145. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
  146. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
  147. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
  148. }
  149. .aurora {
  150. --f7-list-in-list-padding-left: 16px;
  151. --f7-list-inset-border-radius: 4px;
  152. --f7-list-margin-vertical: 15px;
  153. --f7-list-font-size: 14px;
  154. --f7-list-chevron-icon-area: 15px;
  155. --f7-list-chevron-icon-font-size: 16px;
  156. --f7-list-border-color: rgba(0, 0, 0, 0.12);
  157. --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
  158. --f7-list-item-title-line-height: 1.3;
  159. --f7-list-item-subtitle-font-size: 14px;
  160. --f7-list-item-subtitle-line-height: 1.3;
  161. --f7-list-item-text-font-size: 12px;
  162. --f7-list-item-text-line-height: 16px;
  163. --f7-list-item-after-font-size: 13px;
  164. --f7-list-item-after-line-height: 1.2;
  165. --f7-list-item-after-padding: 5px;
  166. --f7-list-item-min-height: 32px;
  167. --f7-list-item-media-margin: 10px;
  168. --f7-list-item-media-icons-margin: 5px;
  169. --f7-list-item-padding-vertical: 5px;
  170. --f7-list-media-item-padding-vertical: 5px;
  171. --f7-list-media-item-title-font-weight: 600;
  172. /*
  173. --f7-list-button-text-color: var(--f7-theme-color);
  174. */
  175. --f7-list-button-text-align: center;
  176. --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
  177. --f7-list-item-divider-height: 19px;
  178. --f7-list-item-divider-font-size: inherit;
  179. --f7-list-item-divider-font-weight: 500;
  180. --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
  181. --f7-list-item-divider-border-color: transparent;
  182. --f7-list-group-title-height: 19px;
  183. --f7-list-group-title-font-size: inherit;
  184. --f7-list-group-title-font-weight: 500;
  185. --f7-list-group-title-bg-color: #f7f7f7;
  186. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
  187. --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
  188. --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
  189. --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
  190. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
  191. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  192. --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
  193. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
  194. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
  195. }
  196. .aurora .theme-dark,
  197. .aurora.theme-dark {
  198. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
  199. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
  200. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
  201. --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
  202. --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
  203. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
  204. --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
  205. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
  206. --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
  207. }

Examples

Simple List

  1. <div class="list simple-list">
  2. <ul>
  3. <li>Item 1</li>
  4. <li>Item 2</li>
  5. <li>Item 3</li>
  6. </ul>
  7. </div>

Links List

  1. <div class="list links-list">
  2. <ul>
  3. <li><a href="#">Link 1</a></li>
  4. <li><a href="#">Link 2</a></li>
  5. <li><a href="#">Link 3</a></li>
  6. </ul>
  7. </div>

List With Icons

  1. <div class="list">
  2. <ul>
  3. <li>
  4. <div class="item-content">
  5. <div class="item-media"><i class="icon icon-f7"></i></div>
  6. <div class="item-inner">
  7. <div class="item-title">Ivan Petrov</div>
  8. <div class="item-after">CEO</div>
  9. </div>
  10. </div>
  11. </li>
  12. <li>
  13. <div class="item-content">
  14. <div class="item-media"><i class="icon icon-f7"></i></div>
  15. <div class="item-inner">
  16. <div class="item-title">John Doe</div>
  17. <div class="item-after"> <span class="badge">5</span></div>
  18. </div>
  19. </div>
  20. </li>
  21. <li>
  22. <div class="item-content">
  23. <div class="item-media"><i class="icon icon-f7"></i></div>
  24. <div class="item-inner">
  25. <div class="item-title">Jenna Smith</div>
  26. </div>
  27. </div>
  28. </li>
  29. </ul>
  30. </div>

Links

  1. <div class="list">
  2. <ul>
  3. <li>
  4. <a href="#" class="item-link item-content">
  5. <div class="item-media"><i class="icon icon-f7"></i></div>
  6. <div class="item-inner">
  7. <div class="item-title">Ivan Petrov</div>
  8. <div class="item-after">CEO</div>
  9. </div>
  10. </a>
  11. </li>
  12. <li>
  13. <a href="#" class="item-link item-content">
  14. <div class="item-media"><i class="icon icon-f7"></i></div>
  15. <div class="item-inner">
  16. <div class="item-title">John Doe</div>
  17. <div class="item-after">Cleaner</div>
  18. </div>
  19. </a>
  20. </li>
  21. <li>
  22. <a href="#" class="item-link item-content">
  23. <div class="item-media"><i class="icon icon-f7"></i></div>
  24. <div class="item-inner">
  25. <div class="item-title">Jenna Smith</div>
  26. </div>
  27. </a>
  28. </li>
  29. </ul>
  30. </div>

Links, Header, Footer

  1. <div class="list">
  2. <ul>
  3. <li>
  4. <a href="#" class="item-link item-content">
  5. <div class="item-media"><i class="icon icon-f7"></i></div>
  6. <div class="item-inner">
  7. <div class="item-title">
  8. <div class="item-header">Name</div>
  9. | John Doe
  10. </div>
  11. <div class="item-after">Edit</div>
  12. </div>
  13. </a>
  14. </li>
  15. <li>
  16. <a href="#" class="item-link item-content">
  17. <div class="item-media"><i class="icon icon-f7"></i></div>
  18. <div class="item-inner">
  19. <div class="item-title">
  20. <div class="item-header">Phone</div>
  21. | +7 90 111-22-3344
  22. </div>
  23. <div class="item-after">Edit</div>
  24. </div>
  25. </a>
  26. </li>
  27. <li>
  28. <a href="#" class="item-link item-content">
  29. <div class="item-media"><i class="icon icon-f7"></i></div>
  30. <div class="item-inner">
  31. <div class="item-title">
  32. <div class="item-header">Email</div>
  33. | john@doe
  34. <div class="item-footer">Home</div>
  35. </div>
  36. <div class="item-after">Edit</div>
  37. </div>
  38. </a>
  39. </li>
  40. <li>
  41. <a href="#" class="item-link item-content">
  42. <div class="item-media"><i class="icon icon-f7"></i></div>
  43. <div class="item-inner">
  44. <div class="item-title">
  45. <div class="item-header">Email</div>
  46. | john@framework7
  47. <div class="item-footer">Work</div>
  48. </div>
  49. <div class="item-after">Edit</div>
  50. </div>
  51. </a>
  52. </li>
  53. </ul>
  54. </div>

Links Without Icons

  1. <div class="list">
  2. <ul>
  3. <li>
  4. <a href="#" class="item-link item-content">
  5. <div class="item-inner">
  6. <div class="item-title">Ivan Petrov</div>
  7. </div>
  8. </a>
  9. </li>
  10. <li>
  11. <a href="#" class="item-link item-content">
  12. <div class="item-inner">
  13. <div class="item-title">John Doe</div>
  14. </div>
  15. </a>
  16. </li>
  17. <li class="item-divider">Divider Here</li>
  18. <li>
  19. <a href="#" class="item-link item-content">
  20. <div class="item-inner">
  21. <div class="item-title">Ivan Petrov</div>
  22. </div>
  23. </a>
  24. </li>
  25. <li>
  26. <a href="#" class="item-link item-content">
  27. <div class="item-inner">
  28. <div class="item-title">Jenna Smith</div>
  29. </div>
  30. </a>
  31. </li>
  32. </ul>
  33. </div>

Grouped with sticky titles

  1. <div class="list">
  2. <div class="list-group">
  3. <ul>
  4. <li class="list-group-title">A</li>
  5. <li>
  6. <div class="item-content">
  7. <div class="item-inner">
  8. <div class="item-title">Aaron </div>
  9. </div>
  10. </div>
  11. </li>
  12. <li>
  13. <div class="item-content">
  14. <div class="item-inner">
  15. <div class="item-title">Abbie</div>
  16. </div>
  17. </div>
  18. </li>
  19. <li>
  20. <div class="item-content">
  21. <div class="item-inner">
  22. <div class="item-title">Adam</div>
  23. </div>
  24. </div>
  25. </li>
  26. </ul>
  27. </div>
  28. <div class="list-group">
  29. <ul>
  30. <li class="list-group-title">B</li>
  31. <li>
  32. <div class="item-content">
  33. <div class="item-inner">
  34. <div class="item-title">Bailey</div>
  35. </div>
  36. </div>
  37. </li>
  38. <li>
  39. <div class="item-content">
  40. <div class="item-inner">
  41. <div class="item-title">Barclay</div>
  42. </div>
  43. </div>
  44. </li>
  45. <li>
  46. <div class="item-content">
  47. <div class="item-inner">
  48. <div class="item-title">Bartolo</div>
  49. </div>
  50. </div>
  51. </li>
  52. </ul>
  53. </div>
  54. <div class="list-group">
  55. <ul>
  56. <li class="list-group-title">C</li>
  57. <li>
  58. <div class="item-content">
  59. <div class="item-inner">
  60. <div class="item-title">Caiden</div>
  61. </div>
  62. </div>
  63. </li>
  64. <li>
  65. <div class="item-content">
  66. <div class="item-inner">
  67. <div class="item-title">Calvin</div>
  68. </div>
  69. </div>
  70. </li>
  71. <li>
  72. <div class="item-content">
  73. <div class="item-inner">
  74. <div class="item-title">Candy</div>
  75. </div>
  76. </div>
  77. </li>
  78. </ul>
  79. </div>
  80. </div>

Mixed and nested

  1. <div class="list">
  2. <ul>
  3. <li>
  4. <a href="#" class="item-link item-content">
  5. <div class="item-media"><i class="icon icon-f7"></i></div>
  6. <div class="item-inner">
  7. <div class="item-title">Ivan Petrov</div>
  8. <div class="item-after">CEO</div>
  9. </div>
  10. </a>
  11. </li>
  12. <li>
  13. <a href="#" class="item-link item-content">
  14. <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
  15. <div class="item-inner">
  16. <div class="item-title">Two icons here</div>
  17. </div>
  18. </a>
  19. </li>
  20. <li>
  21. <div class="item-content">
  22. <div class="item-inner">
  23. <div class="item-title">No icons here</div>
  24. </div>
  25. </div>
  26. <ul>
  27. <li>
  28. <a href="#" class="item-link item-content">
  29. <div class="item-media"><i class="icon icon-f7"></i></div>
  30. <div class="item-inner">
  31. <div class="item-title">Ivan Petrov</div>
  32. <div class="item-after">CEO</div>
  33. </div>
  34. </a>
  35. </li>
  36. <li>
  37. <a href="#" class="item-link item-content">
  38. <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
  39. <div class="item-inner">
  40. <div class="item-title">Two icons here</div>
  41. </div>
  42. </a>
  43. </li>
  44. <li>
  45. <div class="item-content">
  46. <div class="item-inner">
  47. <div class="item-title">No icons here</div>
  48. </div>
  49. </div>
  50. </li>
  51. <li>
  52. <a href="#" class="item-link item-content">
  53. <div class="item-media"><i class="icon icon-f7"></i></div>
  54. <div class="item-inner">
  55. <div class="item-title">Ultra long text goes here, no, it is really really long</div>
  56. </div>
  57. </a>
  58. </li>
  59. <li>
  60. <div class="item-content">
  61. <div class="item-media"><i class="icon icon-f7"></i></div>
  62. <div class="item-inner">
  63. <div class="item-title">With toggle</div>
  64. <div class="item-after">
  65. <label class="toggle toggle-init">
  66. <input type="checkbox">
  67. <span class="toggle-icon"></span>
  68. </label>
  69. </div>
  70. </div>
  71. </div>
  72. </li>
  73. </ul>
  74. </li>
  75. <li>
  76. <a href="#" class="item-link item-content">
  77. <div class="item-media"><i class="icon icon-f7"></i></div>
  78. <div class="item-inner">
  79. <div class="item-title">Ultra long text goes here, no, it is really really long</div>
  80. </div>
  81. </a>
  82. </li>
  83. <li>
  84. <div class="item-content">
  85. <div class="item-media"><i class="icon icon-f7"></i></div>
  86. <div class="item-inner">
  87. <div class="item-title">With toggle</div>
  88. <div class="item-after">
  89. <label class="toggle toggle-init">
  90. <input type="checkbox"/>
  91. <span class="toggle-icon"></span>
  92. </label>
  93. </div>
  94. </div>
  95. </div>
  96. </li>
  97. </ul>
  98. </div>

Mixed, inset

  1. <div class="list inset">
  2. <ul>
  3. <li>
  4. <a href="#" class="item-link item-content">
  5. <div class="item-media"><i class="icon icon-f7"></i></div>
  6. <div class="item-inner">
  7. <div class="item-title">Ivan Petrov</div>
  8. <div class="item-after">CEO</div>
  9. </div>
  10. </a>
  11. </li>
  12. <li>
  13. <a href="#" class="item-link item-content">
  14. <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
  15. <div class="item-inner">
  16. <div class="item-title">Two icons here</div>
  17. </div>
  18. </a>
  19. </li>
  20. <li>
  21. <a href="#" class="item-link item-content">
  22. <div class="item-media"><i class="icon icon-f7"></i></div>
  23. <div class="item-inner">
  24. <div class="item-title">Ultra long text goes here, no, it is really really long</div>
  25. </div>
  26. </a>
  27. </li>
  28. <li>
  29. <div class="item-content">
  30. <div class="item-media"><i class="icon icon-f7"></i></div>
  31. <div class="item-inner">
  32. <div class="item-title">With toggle</div>
  33. <div class="item-after">
  34. <label class="toggle toggle-init">
  35. <input type="checkbox"/>
  36. <span class="toggle-icon"></span>
  37. </label>
  38. </div>
  39. </div>
  40. </div>
  41. </li>
  42. </ul>
  43. <div class="block-footer">
  44. <p>Here comes some useful information about list above</p>
  45. </div>
  46. </div>

Tablet inset

  1. <div class="list medium-inset">
  2. <ul>
  3. <li>
  4. <a href="#" class="item-link item-content">
  5. <div class="item-media"><i class="icon icon-f7"></i></div>
  6. <div class="item-inner">
  7. <div class="item-title">Ivan Petrov</div>
  8. <div class="item-after">CEO</div>
  9. </div>
  10. </a>
  11. </li>
  12. <li>
  13. <a href="#" class="item-link item-content">
  14. <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
  15. <div class="item-inner">
  16. <div class="item-title">Two icons here</div>
  17. </div>
  18. </a>
  19. </li>
  20. <li>
  21. <a href="#" class="item-link item-content">
  22. <div class="item-media"><i class="icon icon-f7"></i></div>
  23. <div class="item-inner">
  24. <div class="item-title">Ultra long text goes here, no, it is really really long</div>
  25. </div>
  26. </a>
  27. </li>
  28. </ul>
  29. <div class="block-footer">
  30. <p>This list block will look like "inset" only on tablets (iPad)</p>
  31. </div>
  32. </div>

Media List / Songs

  1. <div class="list media-list">
  2. <ul>
  3. <li>
  4. <a href="#" class="item-link item-content">
  5. <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="80"/></div>
  6. <div class="item-inner">
  7. <div class="item-title-row">
  8. <div class="item-title">Yellow Submarine</div>
  9. <div class="item-after">$15</div>
  10. </div>
  11. <div class="item-subtitle">Beatles</div>
  12. <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
  13. </div></a></li>
  14. <li>
  15. <a href="#" class="item-link item-content">
  16. <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg" width="80"/></div>
  17. <div class="item-inner">
  18. <div class="item-title-row">
  19. <div class="item-title">Don't Stop Me Now</div>
  20. <div class="item-after">$22</div>
  21. </div>
  22. <div class="item-subtitle">Queen</div>
  23. <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
  24. </div>
  25. </a>
  26. </li>
  27. <li>
  28. <a href="#" class="item-link item-content">
  29. <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg" width="80"/></div>
  30. <div class="item-inner">
  31. <div class="item-title-row">
  32. <div class="item-title">Billie Jean</div>
  33. <div class="item-after">$16</div>
  34. </div>
  35. <div class="item-subtitle">Michael Jackson</div>
  36. <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
  37. </div>
  38. </a>
  39. </li>
  40. </ul>
  41. </div>

Media List / Mail App

  1. <div class="list media-list">
  2. <ul>
  3. <li>
  4. <a href="#" class="item-link item-content">
  5. <div class="item-inner">
  6. <div class="item-title-row">
  7. <div class="item-title">Facebook</div>
  8. <div class="item-after">17:14</div>
  9. </div>
  10. <div class="item-subtitle">New messages from John Doe</div>
  11. <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
  12. </div>
  13. </a>
  14. </li>
  15. <li>
  16. <a href="#" class="item-link item-content">
  17. <div class="item-inner">
  18. <div class="item-title-row">
  19. <div class="item-title">John Doe (via Twitter)</div>
  20. <div class="item-after">17:11</div>
  21. </div>
  22. <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
  23. <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
  24. </div>
  25. </a>
  26. </li>
  27. <li>
  28. <a href="#" class="item-link item-content">
  29. <div class="item-inner">
  30. <div class="item-title-row">
  31. <div class="item-title">Facebook</div>
  32. <div class="item-after">16:48</div>
  33. </div>
  34. <div class="item-subtitle">New messages from John Doe</div>
  35. <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
  36. </div>
  37. </a>
  38. </li>
  39. <li>
  40. <a href="#" class="item-link item-content">
  41. <div class="item-inner">
  42. <div class="item-title-row">
  43. <div class="item-title">John Doe (via Twitter)</div>
  44. <div class="item-after">15:32</div>
  45. </div>
  46. <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
  47. <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
  48. </div>
  49. </a>
  50. </li>
  51. </ul>
  52. </div>

With centered chevron icon

  1. <div class="list media-list chevron-center">
  2. <ul>
  3. <li>
  4. <a href="#" class="item-link item-content">
  5. <div class="item-inner">
  6. <div class="item-title-row">
  7. <div class="item-title">Facebook</div>
  8. <div class="item-after">17:14</div>
  9. </div>
  10. <div class="item-subtitle">New messages from John Doe</div>
  11. <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
  12. </div>
  13. </a>
  14. </li>
  15. <li>
  16. <a href="#" class="item-link item-content">
  17. <div class="item-inner">
  18. <div class="item-title-row">
  19. <div class="item-title">John Doe (via Twitter)</div>
  20. <div class="item-after">17:11</div>
  21. </div>
  22. <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
  23. <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
  24. </div>
  25. </a>
  26. </li>
  27. </ul>
  28. </div>

Media List / Something more simple

  1. <div class="list media-list">
  2. <ul>
  3. <li>
  4. <div class="item-content">
  5. <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="44"/></div>
  6. <div class="item-inner">
  7. <div class="item-title-row">
  8. <div class="item-title">Yellow Submarine</div>
  9. </div>
  10. <div class="item-subtitle">Beatles</div>
  11. </div>
  12. </div>
  13. </li>
  14. <li>
  15. <a href="#" class="item-link item-content">
  16. <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg" width="44"/></div>
  17. <div class="item-inner">
  18. <div class="item-title-row">
  19. <div class="item-title">Don't Stop Me Now</div>
  20. </div>
  21. <div class="item-subtitle">Queen</div>
  22. </div>
  23. </a>
  24. </li>
  25. <li>
  26. <div class="item-content">
  27. <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg" width="44"/></div>
  28. <div class="item-inner">
  29. <div class="item-title-row">
  30. <div class="item-title">Billie Jean</div>
  31. </div>
  32. <div class="item-subtitle">Michael Jackson</div>
  33. </div>
  34. </div>
  35. </li>
  36. </ul>
  37. </div>

Media List / Inset

  1. <div class="list media-list inset">
  2. <ul>
  3. <li>
  4. <a href="#" class="item-link item-content">
  5. <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44"/></div>
  6. <div class="item-inner">
  7. <div class="item-title-row">
  8. <div class="item-title">Yellow Submarine</div>
  9. </div>
  10. <div class="item-subtitle">Beatles</div>
  11. </div>
  12. </a>
  13. </li>
  14. <li>
  15. <a href="#" class="item-link item-content">
  16. <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44"/></div>
  17. <div class="item-inner">
  18. <div class="item-title-row">
  19. <div class="item-title">Don't Stop Me Now</div>
  20. </div>
  21. <div class="item-subtitle">Queen</div>
  22. </div>
  23. </a>
  24. </li>
  25. <li>
  26. <a href="#" class="item-link item-content">
  27. <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44"/></div>
  28. <div class="item-inner">
  29. <div class="item-title-row">
  30. <div class="item-title">Billie Jean</div>
  31. </div>
  32. <div class="item-subtitle">Michael Jackson</div>
  33. </div>
  34. </a>
  35. </li>
  36. </ul>
  37. </div>

List Buttons

  1. <div class="list">
  2. <ul>
  3. <li>
  4. <a href="#" class="list-button">Button 1</a>
  5. </li>
  6. <li>
  7. <a href="#" class="list-button">Button 2</a>
  8. </li>
  9. <li>
  10. <a href="#" class="list-button">Button 3</a>
  11. </li>
  12. </ul>
  13. </div>

Inset List Buttons

  1. <div class="list inset">
  2. <ul>
  3. <li>
  4. <a href="#" class="list-button">Button 1</a>
  5. </li>
  6. <li>
  7. <a href="#" class="list-button">Button 2</a>
  8. </li>
  9. <li>
  10. <a href="#" class="list-button">Button 3</a>
  11. </li>
  12. </ul>
  13. </div>

Custom Table-like Layout

  1. <div class="list">
  2. <ul>
  3. <li>
  4. <a href="#" class="item-link item-content">
  5. <div class="item-inner item-cell">
  6. <div class="item-row">
  7. <div class="item-cell">Cell 1-1</div>
  8. <div class="item-cell">Cell 1-2</div>
  9. <div class="item-cell">Cell 1-3</div>
  10. </div>
  11. <div class="item-row">
  12. <div class="item-cell">Cell 2-1</div>
  13. <div class="item-cell">Cell 2-2</div>
  14. </div>
  15. <div class="item-row">
  16. <div class="item-cell">Cell 3-1</div>
  17. <div class="item-cell">
  18. <div class="item-row">
  19. Cell 3-2
  20. </div>
  21. <div class="item-row">
  22. Cell 3-3
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. </a>
  28. </li>
  29. <li>
  30. <a href="#" class="item-link item-content">
  31. <div class="item-inner item-cell">
  32. <div class="item-row">
  33. <div class="item-cell">Cell 1-1</div>
  34. <div class="item-cell">Cell 1-2</div>
  35. <div class="item-cell">Cell 1-3</div>
  36. </div>
  37. <div class="item-row">
  38. <div class="item-cell">Cell 2-1</div>
  39. <div class="item-cell">Cell 2-2</div>
  40. </div>
  41. <div class="item-row">
  42. <div class="item-cell">Cell 3-1</div>
  43. <div class="item-cell">
  44. <div class="item-row">
  45. Cell 3-2
  46. </div>
  47. <div class="item-row">
  48. Cell 3-3
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </a>
  54. </li>
  55. </ul>
  56. </div>

← Link

List Index →