Tables & Lists

Standard Lists

Information

Lists can be used within other components, modules and general pages. The different examples that are displayed below only show support for up to two sub-tiers of lists. If the use-case requires more than two sub-tiers of lists then you should consider using another item to portray/convey the information you wish to get across.

Visual Example

Unordered List
Bullet List
Numbered List
  1. List Item #1
  2. List Item #2
  3. List Item #3
  4. List Item #4
  5. List Item #5
Indent List

Code Usage

Unordered List
Bullet List
Numbered List

										
    
											
  1. List Item #1
    2. 
											
  2. List Item #2
    3. 
											
  3. List Item #3
    4. 
											
  4. List Item #4
    5. 
											
  5. List Item #5
    6.
Indent List

Sub-Tier Lists

+

Information

Sub-tier lists are a mix and match of the main list elements that are displayed above. They can be used as per your disgression, so long as the number of tier levels does not exceed 1. This is to ensure that data that is portrayed in the best way possible. Please refer to other elements if requiring more than 1 sub-tier for displaying information.

The main change to this version is the the list element that is housing the sub-tier of lists has a class of 'subtier'.

Visual Example

Unordered List + Numbered List
Bullet List + Unordered List
Numbered List + Indent List
  1. List Item #1
  2. List Item #2
  3. List Item #3
  4. List Item #4
  6. List Item #5
Indent List + Bullet List

Code Usage

Unordered List + Numbered Lis
Bullet List + Unordered List
Numbered List + Indent List

										
    
											
  1. List Item #1
    2. 
											
  2. List Item #2
    3. 
											
  3. List Item #3
    4. 
											
  4. List Item #4
    5. 
											
  5. 
												
											
    6. 
											
  6. List Item #5
    7.
Indent List + Bullet List