Body

The body is the area visible between the header and footer. Your application's body can contain various content types, such as different kinds of lists or menus.

List

This is the most basic type of body content. You can use lists to display either single-line or multi-line items in an orderly manner. Each list item can have various elements, such as text, an icon, a thumbnail image, or a button.

List items
List items

Grouped List

Using a grouped list, you can associate similar items. Although the content configuration is similar to basic lists, in a grouped list, you should group visually associated list items together.  

Grouped list
Grouped list

Index List

Use an index list if you can group your list items according to a consistent, orderly criteria, such as:

  • Alphabetical order
  • Names representing grouped categories
  • Time or date
Index list
Index list
 
NOTE: You can customize the order of the index list in the Web framework.

Expandable List

This type of list gives users on-demand access to lower items in a list. Tapping the expandable list item once expands the list; tapping it again contracts the list.  

Expandable list
Expandable list
 
 
Using an expandable list
Using an expandable list

Grid List

Use a grid list to show multiple thumbnail images. Although the grid list uses horizontal scrolling, vertical scrolling is also possible. If necessary, place labels for each thumbnail at the bottom of each grid cell.

Grid list
Grid list