List

Introduction

Lists are used to group together similar items. There are two types of lists, ordered and un-ordered. ClutchUI allows you to create these lists with ease.

Unordered list

Here are some of the unordered lists provided by ClutchUI

Spaced Lists

These lists are spaced horizontally with space between them.


You can adjust the space using gap-1 | gap-2 | gap-3 class.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Stacked Lists

These lists are spaced vertically on top of each other with space between them.


You can adjust the space using gap-1 | gap-2 | gap-3 class.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Shaped lists

There are three types of shaped lists.


Bullet list - list-bullet, Circle list - list-circle and Square list - list-square

  • Bullet Item 1
  • Bullet Item 2
  • Bullet Item 3
  • Bullet Item 4
  • Circle Item 1
  • Circle Item 2
  • Circle Item 3
  • Circle Item 4
  • Square Item 1
  • Square Item 2
  • Square Item 3
  • Square Item 4

Ordered Lists

Here are some of the ordered lists provided by ClutchUI.

Numbered Lists

There are three types of numbered lists provided by ClutchUI.


Numbered Lists using list-number, lower roman lists using list-lower-roman and upper roman lists using list-upper-roman.

  1. Numbered Item 1
  2. Numbered Item 2
  3. Numbered Item 3
  4. Numbered Item 4
  1. Lower-roman Item 1
  2. Lower-roman Item 2
  3. Lower-roman Item 3
  4. Lower-roman Item 4
  1. Upper-roman Item 1
  2. Upper-roman Item 2
  3. Upper-roman Item 3
  4. Upper-roman Item 4

Alphabetical Lists

There are two types of alphabetical lists provided by ClutchUI.


Lower alphabets lists using list-lower-alpha and upper alphabets lists using list-upper-alpha.

  1. Lower-alpha Item 1
  2. Lower-alpha Item 2
  3. Lower-alpha Item 3
  4. Lower-alpha Item 4
  1. Upper-alpha Item 1
  2. Upper-alpha Item 2
  3. Upper-alpha Item 3
  4. Upper-alpha Item 4
InputModal