Important Links

Get Started

Components

Avatar Alert Badge Button Cards Image Input Texts Utilites List Navigation Rating Snackbar Grid Modal

Home Components List

List

List component is used to list the product/items.

Usages

Car
Bike
Cycle

This is the default Texts from our component library.

                
                  < -- For Ordered List -->
                  

                 <div class="ordered-list"> 

                 <ol> 

                 <li>Car</li> 

                 <li>Bike</li> 

                 <li>Cycle</li> 

                 </ol> 

                 </div>

Bullet List

In this style, items will start with bullet.

Usages

Bullet Item 1
Bullet Item 2
Bullet Item 3
Bullet Item 4

To achieve the list designs , you need to follow the following code:

                
                  < -- For Bullet List -->
                  

                  <ul class="bullet-list"> 

                  <li>Bullet Item 1</li> 

                  <li>Bullet Item 2</li> 

                  <li>Bullet Item 3</li> 

                  <li>Bullet Item 4</li> 

                  </ul>

Squared List

In this predifined class list will start with sqaure dot.

Usages

Square Item 1
Square Item 2
Square Item 3
Square Item 4

To achieve the text designs , you need to follow the following code:

                
                  < -- For Squared List -->
                  

                  <ul class="square-list"> 

                  <li>Square Item 1</li> 

                  <li>Square Item 2</li> 

                  <li>Square Item 3</li> 

                  <li>Square Item 4</li> 

                  </ul>

Stacked List

You can style your list more attractive by adding own images.

Usages

Hey, welcome to Componently.

To achieve the stacked list , you need to follow the following code:

                
                  < -- For Stacked List -->
                  

                  <ul class="img-list"> 

                  <li>

                  <img class="avatar" src="url here" alt="img" /> 

                  Hey, welcome to componently. 

                  </li> 

                  </ul>

Texts

Navigation