menu-btn

VISPAUI

 v1.0 Docs

List

VISPA-UI includes an expertly-crafted 4 varieties of Lists which can make your UI building experience effortless.

Basic List

To use the List component give the list class to the ul or the ol elements.

  • 🥭 Mango
  • 🍌 Banana
  • 🍎 Apple
  • 🍇 Grapes
              
              
<ul class="list">
  <li class="list__item">🥭 Mango</li>
  <li class="list__item">🍌 Banana</li>
  <li class="list__item">🍎 Apple</li>
  <li class="list__item">🍇 Grapes</li>
</ul>

Nested List

To use the Nested List component give the nested__list class to the ul or the ol elements that is nested inside the list.

  • Australia
  • India
    • Delhi
    • Mumbai
    • Kolkata
    • Chennai
    • Bangalore
  • USA
  • South Africa
              
              
<ul class="list">
  <li class="list__item">Australia</li>
  <li class="list nested__list">
    India
    <ul class="list nested__list">
      <li class="list__item">Delhi</li>
      <li class="list__item">Mumbai</li>
      <li class="list__item">Kolkata</li>
      <li class="list__item">Chennai</li>
      <li class="list__item">Bangalore</li>
    </ul>
  </li>
  <li class="list__item">USA</li>
  <li class="list__item">South Africa</li>
</ul>

Stacked Notifications List

To use the Stacked Notifications List component give the li__stacked class to the ul or the ol elements of the list.

  • This is a Basic Solid Primary Alert!
  • info This is a Primary Alert - Check it now! close
  • check This is a Solid Success Alert - Check it now! close
  • warning This is a Solid Warning Alert - Check it now! close
  • ban This is a Solid Danger Alert - Check it now! close 
              
              
<ul class="list li__stacked">
  <li class="list__item">
    <Alert></Alert>
  </li>
  <li class="list__item">
    <Alert></Alert>
  </li>
  ...
  <li class="list__item">
    <Alert></Alert>
  </li>
</ul>

Premium Menu List

To use the Premium Menu List component give the li__premium class to the ul or the ol elements of the list.

  • home-btn Home
  • profile-btn Profile
  • message-btn Messages
  • settings Settings 
              
              
<ul class="list li__premium">
  <li class="list__item">
    <img 
      class="icon-md list__icon icon-dark" 
      src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/home.svg"
    > 
    Home
  </li>
  <li class="list__item list__item--active">
    <img 
      class="icon-md list__icon icon-primary" 
      src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/user.svg" 
    > 
    Profile
  </li>
  <li class="list__item">
    <img 
      class="icon-md list__icon icon-dark" 
      src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/comment.svg"
    > 
    Messages
  </li>
  <li class="list__item">
    <img 
      class="icon-md list__icon icon-dark" 
      src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/cog.svg"
    > 
    Settings
  </li>
</ul>