1. Home
  2. Examples
  3. Lists

Lists (Bulleted & Expanding)

.list-overstated

Adding .list-overstated to a ul will render the list with bullet icons and bold hyperlinks.

Source Code:

.list-understated

Adding .list-understated to a ul will render the list with bullet icons and normal weighted hyperlinks.

Source Code:

.list-standout

Adding .list-standout to a ul will render the list with large inward pointing arrows.

Source Code:

List as Accordion

Accordion lists can be toggled open and close by clicking the toggle link. Add id #accordion and class .accordion-list to a ul to create the accordion list. Add .tab to the li tag. Finally, wrap the content to be toggled open and closed in a .card div. You can use .accordion-list in conjunction with any list style provided.

Note: Accordion List uses HTML5 roles, some ARIA properties, and IDs for accessibility. For best accessibility paractices certain keyboard shortcuts are also implemented.

Source Code:

Multi-Tiered Ordered Lists

  1. This is how top-level ordered list items will appear
    • This is how lower-level unordered list items will appear
      1. This is how your lower-level ordered list items will appear
  2. This is how top-level ordered list items will appear
    • This is how lower-level unordered list items will appear
      1. This is how your lower-level ordered list items will appear

Source Code:

    
    
  1. This is how top-level ordered list items will appear
        
      
            
    • This is how lower-level unordered list items will appear
                
        
                    
      1. This is how your lower-level ordered list items will appear
        2. 
                
      
            
      • 
        
    
    
    2. 
    
  2. This is how top-level ordered list items will appear
        
      
            
    • This is how lower-level unordered list items will appear
                
        
                    
      1. This is how your lower-level ordered list items will appear
        2. 
                
      
            
      • 
        
    
    
    3.

Multi-Tiered Unordered Lists

  • This is how top-level ordered list items will appear
    1. This is how lower-level unordered list items will appear
      • This is how your lower-level ordered list items will appear
  • This is how top-level ordered list items will appear
    1. This is how lower-level unordered list items will appear
      • This is how your lower-level ordered list items will appear

Source Code:

    
    
  • This is how top-level ordered list items will appear
        
      
            
    1. This is how lower-level unordered list items will appear
                
        
                    
      • This is how your lower-level ordered list items will appear
        • 
                
      
            
      2. 
        
    
    
    • 
    
  • This is how top-level ordered list items will appear
        
      
            
    1. This is how lower-level unordered list items will appear
                
        
                    
      • This is how your lower-level ordered list items will appear
        • 
                
      
            
      2. 
        
    
    
    •