Lists in Bermuda

On any webpage we often need a list component. Even if we consider this wepage the side navabr is also a list. Hence, Bermuda also gives us the pre-defined css classes for list components.

Simple List

Simple list comes with a list title and with no default text-decoration to list elements.

    Simple List

  • Home
  • Decore
  • Fashion
  • Electronics
                    
                        <ul class="list">

                            <div class="list__title">
                              <h4>Simple List</h4>
                            </div>

                            <li>Home</li>
                            <li>Decore</li>
                            <li>Fashion</li>
                            <li>Electronics</li>

                        </ul>

Nested List

Sometimes we need to nest list elements. Bermuda provides the style for nested list components also.

    Nested List

  • Home
  • Fashion
    • Mens
    • Womens
    • Children
  • Decore
  • Electronics
                    
                        <ul class="list">

                            <div class="list__title">
                              <h4>Nested List</h4>
                            </div>

                            <li>Home</li>

                            <li class="nested-list">
                                <div class="nested-list__title">Fashion</div>
                                <ul>
                                    <li>Mens</li>
                                    <li>Womens</li>
                                    <li>Children</li>
                                </ul>

                            </li>
                            <li>Decore</li>
                            <li>Electronics</li>

                        </ul>

Scrollable List

Scrollable list comes handy when we have more list elements and least place to fit all the list elements. Bermuda gives the design classes for scrollable list also.

    Scrollable List

  • Home
  • Decore
  • Fashion
  • Mens
  • Womens
  • Children
  • Home
  • Decore
  • Fashion
  • Mens
  • Womens
  • Children
                    
                        <ul class="list list-scroll">

                            <div class="list__title">
                              <h4>Scrollable List</h4>
                            </div>
                            
                            <li>Home</li>
                            <li>Decore</li>
                            <li>Fashion</li>
                            <li>Mens</li>
                            <li>Womens</li>
                            <li>Children</li>
                            <li>Home</li>
                            <li>Decore</li>
                            <li>Fashion</li>
                            <li>Mens</li>
                            <li>Womens</li>
                            <li>Children</li>

                        </ul>
  Inputs
Navigation