List

Sequential information can be easily conveyed through lists. Lists are continuous, vertical indexes of text. In order to only use the List Component from Cascade UI in your project, copy and paste the below code in the head tag of your html document. 

                
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/css/foundation.css" />
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/Components/List/list.css" />

Default List

To use this you just need to add class name list to your <ul> tag (eg. <ul class="list">). You can copy the html part from below code snippet.

    Categories
  • Home
  • Brands
  • Clothing
  • Accessories
                        
                            <ul class="list">
                                <div class="list-title">Categories</div>
                                <li>Home</li>
                                <li>Brands</li>
                                <li>Clothing</li>
                                <li>Accessories</li>
                            </ul>

Spaced List

To use this you just need to add class name spaced-list to your <ul> tag (eg. <ul class="spaced-list">). You can copy the html part from below code snippet.

  • Home
  • Brands
  • Clothing
  • Accessories
                        
                            <ul class="spaced-list">
                                <li>Home</li>
                                <li>Brands</li>
                                <li>Clothing</li>
                                <li>Accessories</li>
                            </ul>

Stacked List

Stacked lists may have images , header and additional info as well they are mostly used in notifications. To use this you just need to add class name stacked-list to your <ul> tag (eg. <ul class="stacked-list">). You can copy the html part from below code snippet.

  • Shanolhere | CascadeUI.IG

    Someone liked your post!

    22mins ago

  • Sabhere | CascadeUI.onMoj

    CascadeUI Moz channel!

    2hrs ago

  • CascadeUI | CascadeShorts

    Shorts of CascadeUI!

    22hrs ago 
                        
                            <ul class="stacked-list">
                                <li class="stacked-item">
                                    <div class="avatar">
                                        <img class="rounded-avatar" src="/assets/avatar-female1.jpg">
                                    </div>
                                    <div class="stacked-text">
                                        <h3>Shanolhere | CascadeUI.IG</h3>
                                        <p>Someone liked your post!</p>
                                    </div>
                                    <div class="stacked-time">
                                        <span>22mins ago</span>
                                    </div>
                                </li>
                                <li class="stacked-item">
                                    <div class="avatar">
                                        <img class="rounded-avatar" src="/assets/avatar-female2.jpg">
                                    </div>
                                    <div class="stacked-text">
                                        <h3>Sabhere | CascadeUI.onMoj</h3>
                                        <p> CascadeUI Moz channel!</p>
                                    </div>
                                    <div class="stacked-time">
                                        <span>2hrs ago</span>
                                    </div>
                                </li>
                                <li class="stacked-item">
                                    <div class="avatar">
                                        <img class="rounded-avatar" src="/assets/avatar-male1.jpg">
                                    </div>
                                    <div class="stacked-text">
                                        <h3>CascadeUI | CascadeShorts</h3>
                                        <p>Shorts of CascadeUI!</p>
                                    </div>
                                    <div class="stacked-time">
                                        <span>22hrs ago</span>
                                    </div>
                                </li>
                            </ul>