Components

List

Lists are a continuous group of text, or images containing information. They can compose icons, texts or both. Basic list are of two types, unordered & ordered lists.

Unordered list

Unordered lists comes in various styles. Default unordered lists comes with filled circle. For hollow circle, add list-style-circle class & for square list add list-style-square class inside <ul> tag. (e.g. class="list-style-circle")

  • list item 1
  • list item 2
  • list item 3
  • list item 1
  • list item 2
  • list item 3
  • list item 1
  • list item 2
  • list item 3

Code Snippets

              
                
              
    
                
  • list item 1
    • 
                
  • list item 2
    • 
                
  • list item 3
    • 
              

              
    
                
  • list item 1
    • 
                
  • list item 2
    • 
                
  • list item 3
    • 
              

              
    
                
  • list item 1
    • 
                
  • list item 2
    • 
                
  • list item 3
    •

Ordered list

Ordered lists comes in various styles. Default unordered lists comes with numbered list. For alpha list, add list-style-alpha class , for roman numeric list add list-style-roman class inside <ol> tag. (e.g. class="list-style-roman").

Reversed list can be created by including reversed attribute.

  1. list item 1
  2. list item 2
  3. list item 3
  1. list item 1
  2. list item 2
  3. list item 3
  1. list item 1
  2. list item 2
  3. list item 3
  1. Reversed list item 1
  2. Reversed list item 2
  3. Reversed list item 3

Code Snippets

              
                
              
    
                
  1. list item 1
    2. 
                
  2. list item 2
    3. 
                
  3. list item 3
    4. 
              

              
    
                
  1. list item 1
    2. 
                
  2. list item 2
    3. 
                
  3. list item 3
    4. 
              

              
    
                
  1. list item 1
    2. 
                
  2. list item 2
    3. 
                
  3. list item 3
    4. 
              

              
    
                
  1. Reversed list item 1
    2. 
                
  2. Reversed list item 2
    3. 
                
  3. Reversed list item 3
    4.

Simple list

Simple lists can be created by including icon & informational text. Add list-content to container tag. For list items add list-content-item class in <li> tag.

Bullets can be removed from list by including no-bullet class inside <ul> tag.

  • Inbox
  • Star
  • Send Mail
  • Drafts

Code Snippets

              
               
             

                
    
                  
  • 
                    Inbox
                  
    • 
                  
  • Star
    • 
                  
  • Send Mail
    • 
                  
  • Drafts
    •

Stacked list

Stacked lists can be created by including avatar, image & informational text. Add list-stacked-content to container tag. For list items add list-content-item class in <li> tag.

  • user

    Neha

    nehagupta@gmail.com

  • user

    Neha

    nehagupta@gmail.com

  • user

    Neha

    nehagupta@gmail.com

  • user

    Neha

    nehagupta@gmail.com

Code Snippets

              
               
             

              
    
                
  • 
                  
    
                    user
                  
    
                  
    
                    
    Neha
    
                    
    nehagupta@gmail.com
    
                  
    
                
    • 
                
  • 
                
  • 
                  
    
                    user
                  
    
                  
    
                    
    Neha
    
                    
    nehagupta@gmail.com
    
                  
    
                
    •
Previous Next