Get started

Components

Lists
HTML lists allow web developers to group a set of related items in lists.
Simple Lists
As the name suggests, this is a simple list which contains various items 
                
                    <div class="lists">
                        <div class="title">
                            <b>Categories</b>
                        </div>
                                <ul class="categories">
                                <li>Mobile</li>
                                <li>Laptop</li>
                                <li>Refrigerator</li>
                                <li>Air Conditioners</li>
                            </ul>  
                  </div>
Categories
  • Mobile
  • Laptop
  • Refrigerator
  • Air Conditioners
Spaced Lists
Spaced lists can be used to a category within an item 
                
                    <div class="lists">
                        <div class="title">
                            <b>Categories</b>
                        </div>
                            <ul class="categories">
                                <li>Laptop</li>
                                <ul class="spaced-list"&
                                <span>Mobile</span>
                                <li>Apple</li>
                                <li>Samsung</li>
                                <li>Oneplus</li>
                                </ul>
                        
                            <li>Refrigerator</li>
                            <li>Air Conditioners</li>
                            </ul>  
                  </div>
Stacked Lists
Stacked list can be used to show a notification to users where they can view a recent activity or any content which grabs their attention 
          
          <div class="lists">
            <div class="title">
              <b>Categories</b>
            </div>
              <ul class="categories">
                  <li>Laptop</li>
                  <ul class="spaced-list">
                  <span>Mobile</span>
                  <li>Apple</li>
                  <li>Samsung</li>
                  <li>Oneplus</li>
                  </ul>
              <li>Refrigerator</li>
              <li>Air Conditioners</li>
              </ul>  
          </div>
Categories
  • Laptop
      • Mobile
    • Apple
    • Samsung
    • Oneplus
  • Refrigerator
  • Air Conditioners
Notification List
Notification List can be used to show a set of notification to the user 
          
          <div class="stacked-list">
            <div class="app-name">
              <div class="app-logo">
                <i class="fab fa-instagram fa-2x"></i>
                <span>Instagram</span>
              </div>
              <span>1:30AM</span>
            </div>

            <ul class="notification-msg">
              <li>Raj Bhinde commented on your post</li>
              <li>Shubham liked your post</li>
              <li>Divya liked your post</li>
            </ul>
          </div>
1:30AM
  • Raj Bhinde commented on your post
  • Shubham liked your post
  • Divya liked your post