Super UI

Lists

Lists can be used at so many places, navigation bar, stacked notifications, article pages, etc.

Example of Unordered List with bullets

Add class according to bullet style. Copy html code below and add your desired list items.

  • list item1
  • list item2
  • list item3
  • list item1
  • list item2
  • list item3
  • list item1
  • list item2
  • list item3
<ul class="styled-list padding-md d-inline_block">
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>
<ul class="styled-list list-style-circle padding-md d-inline_block">
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>
<ul class="styled-list list-style-square padding-md d-inline_block">
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>
view raw gistfile1.txt hosted with ❤ by GitHub

Example of Ordered List with bullets

Add class according to bullet style. Copy html code below and add your desired list items. To reverse the order of ordered list, add reversed attribute to ol element

  1. list with numbers
  2. list with numbers
  3. list with numbers
  1. list reverse
  2. list reverse
  3. list reverse
  1. list with uppercase
  2. list with uppercase
  3. list with uppercase
  1. list with lowercase
  2. list with lowercase
  3. list with lowercase
  1. list with lowerRoman
  2. list with lowerRoman
  3. list with lowerRoman
  1. list with upperRoman
  2. list with upperRoman
  3. list with upperRoman
<div>
<ol class="styled-list padding-md d-inline_block">
<li>list with numbers</li>
<li>list with numbers</li>
<li>list with numbers</li>
</ol>
<ol class="styled-list padding-md d-inline_block" reversed>
<li>list reverse</li>
<li>list reverse</li>
<li>list reverse</li>
</ol>
<ol class="styled-list list-style-upper-case padding-md d-inline_block">
<li>list with uppercase</li>
<li>list with uppercase</li>
<li>list with uppercase</li>
</ol>
</div>
<div>
<ol class="styled-list list-style-lower-case padding-md d-inline_block">
<li>list with lowercase</li>
<li>list with lowercase</li>
<li>list with lowercase</li>
</ol>
<ol class="styled-list list-style-lower-roman padding-md d-inline_block">
<li>list with lowerRoman</li>
<li>list with lowerRoman</li>
<li>list with lowerRoman</li>
</ol>
<ol class="styled-list list-style-upper-roman padding-md d-inline_block">
<li>list with upperRoman</li>
<li>list with upperRoman</li>
<li>list with upperRoman</li>
</ol>
</div>
view raw gistfile1.txt hosted with ❤ by GitHub

Example of List with no bullets

If you want list stacked but with no bullet and indentation, then you can add list-style-none class.

Class styled-list applies padding between two list items.

  • list item no bullets
  • list item no bullets
  • list item no bullets
<ul class="styled-list list-style-none padding-md d-inline_block">
<li>list item no bullets</li>
<li>list item no bullets</li>
<li>list item no bullets</li>
</ul>
view raw gistfile1.txt hosted with ❤ by GitHub

Example of List with inline items

If you want list items in same line instead of stacked, you can add inline-list class to make it inline.

And you can also add list-style-none class to remove bullets.

  • inline element
  • inline element
  • inline element
<ul class="styled-list padding-md">
<li class="list-style-inline">inline element</li>
<li class="list-style-inline">inline element</li>
<li class="list-style-inline">inline element</li>
</ul>
view raw gistfile1.txt hosted with ❤ by GitHub

Example of Notification Stacked List

This is stacked list without bullets. We can add desired component inside "li" element.

  • black_jacket

    Black Jacket

    Men's Cap

    Sold by: Prabhat Singh

    2 hours ago

  • black_jacket

    Black Cap

    Men's Cap

    Sold by: Prabhat Singh

    3 hours ago

<ul class="styled-list list-style-none padding-md d-inline_block">
<li>
<div class="card-container d-flex padding-xs">
<div class="avatar-md position-rel margin-xs">
<img
class="img-responsive"
src="/assests/Images/example_image1-min.jpg"
alt="black_jacket"
/>
</div>
<div class="card-description">
<h1 class="card-title head-3">Black Jacket</h1>
<h2 class="card-subtitle head-4">Men's Cap</h2>
<h3 class="head-4 text-gray">Sold by: Prabhat Singh</h3>
<p class="text-4 text-gray">2 hours ago</p>
</div>
</div>
</li>
<li>
<div class="card-container d-flex padding-xs">
<div class="avatar-md position-rel margin-xs">
<img
class="img-responsive"
src="/assests/Images/example_image1-min.jpg"
alt="black_jacket"
/>
</div>
<div class="card-description">
<h1 class="card-title head-3">Black Cap</h1>
<h2 class="card-subtitle head-4">Men's Cap</h2>
<h3 class="head-4 text-gray">Sold by: Prabhat Singh</h3>
<p class="text-4 text-gray">3 hours ago</p>
</div>
</div>
</li>
</ul>
view raw gistfile1.txt hosted with ❤ by GitHub