0%
Uix Kit

Icons Ordered List

Use any icon as a bullet point to create lists. Just inset the icon's class name in the data-list-bullet attribute. A full list of available icons can be found here.


  • Here's bullet point number one
  • Now for the second point
  • You guessed it, here comes the third
  • A fourth bullet point just to be safe
  • Here's bullet point number one
  • Now for the second point
  • You guessed it, here comes the third
  • A fourth bullet point just to be safe
  • Here's bullet point number one
  • Now for the second point
  • You guessed it, here comes the third
  • A fourth bullet point just to be safe
  • Here's bullet point number one
  • Now for the second point
  • You guessed it, here comes the third
  • A fourth bullet point just to be safe

Custom Bullets Ordered List


  • Line Item #1
  • Line Item #2
  • Line Item #3
  • Line Item #4
  • Line Item #5

Numbers Ordered List

If you need to hide the number 0, just add .uix-list--numbered-1-digit to .uix-list--numbered-large or .uix-list--numbered.


  1. Line Item #1
  2. Line Item #2
  3. Line Item #3
  4. Line Item #4
  5. Line Item #5
  1. Line Item #1
  2. Line Item #2
  3. Line Item #3
  4. Line Item #4
  5. Line Item #5
  1. This is the First Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  2. This is the Second heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pellentesque tortor non erat sodales, in tristique dui convallis.

  3. This is the Third Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pellentesque tortor non erat sodales, in tristique dui convallis. Mauris sed mi nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus.

  1. Consectetur adipiscing elit.

  2. This is the Second heading

  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Step Timeline By Numbers


  • Step 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Step 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pellentesque tortor non erat sodales, in tristique dui convallis. Mauris sed mi nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus.

  • Step 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Step 4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Step 5

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.