Components

List

As the name suggests it is a list of items, major types of lists are as follows:

1. Basic list: They can ordered(numbers) or unordered(bullets).

2. Bullet-less list: bullets or numbers are removed from the basic list.

3. Horizontal list: Rather than rendering vertically, this list renders horizontally (along x-axis.)

4. Stacked list: Best example of these lists is a notifications tab in any app.

1. Normal List:

            
                <ul class="list-line-height">
                    <li>Banana</li>
                    <li>Apple</li>
                    <li>Mango</li>
                    <li>Orange</li>
                </ul>

2. Bullet-less List:

            
                <ul class="list-line-height list-style">
                    <li>Banana</li>
                    <li>Apple</li>
                    <li>Mango</li>
                    <li>Orange</li>
                </ul>

3. Horizontal List:

            
                <ul class="list-horizontal">
                    <li>Banana</li>
                    <li>Apple</li>
                    <li>Mango</li>
                    <li>Orange</li>
                </ul>

4. Stacked List:

            
                <ul>
                    <li class = "stacked-list-item">Lorem Lorem ipsum dolor sit amet.</li>
                    <li class = "stacked-list-item">Lorem Lorem ipsum dolor sit amet.</li>
                    <li class = "stacked-list-item">Lorem Lorem ipsum dolor sit amet.</li>
                    <li class = "stacked-list-item">Lorem Lorem ipsum dolor sit amet.</li>
                    <li class = "stacked-list-item">Lorem Lorem ipsum dolor sit amet.</li>
                </ul>
designed by Rajat Gupta