List

A list is used to showcase the user the number items available. Also it allows us to display a list of pages or links.

Normal List

normal list can contain links, items & icons in it.

Components list

Alert
Button
Badges
Cards
Image
Text-utilities
Avatar

                               
                            <ul class="list">
                                <h3 class="list-text">Components list</h3>
                                <li class="list-item">Alert</li>
                                <li class="list-item">Button</li>
                                <li class="list-item">Badges</li>
                                <li class="list-item">Cards</li>
                                <li class="list-item">Image</li>
                                <li class="list-item">Text-utilities</li>
                                <li class="list-item">Avatar</li>
                            </ul>

Notification Page List

Below is an example of list which we can use in notifiaction page.

Did You Know?

here is something that you might like to know
Uh oh, something went wrong

sorry! There was a problem with your request.
Yay! Everything worked

congrats on successful request.

                                
                                <ul>
                                    <li class="page-list">
                                        <div class="left">
                                            <i class="fas fa-info icon-primary"></i>
                                        </div>
                                        <div class="right">
                                            <h3>Did You Know?</h3>
                                            <p>here is something that you might like to know</p>
                                        </div>
                                    </li>
                                    <li class="page-list">
                                        <div class="left">
                                            <i class="fas fa-exclamation icon-danger"></i>
                                        </div>
                                        <div class="right">
                                            <h3>Uh oh, something went wrong</h3>
                                            <p>sorry! There was a problem with your request.</p>
                                        </div>
                                    </li>
                                    <li class="page-list">
                                        <div class="left">
                                            <i class="fas fa-check icon-success"></i>
                                        </div>
                                        <div class="right">
                                            <h3>Yay! Everything worked</h3>
                                            <p>congrats on successful request.</p>
                                        </div>
                                    </li>
                                </ul>