List Items


We can use list as ordered and unordered and various size and colors make some align / discipline by CSS

jds-list

List regular
jds-list
  • If it doesn't matter cut it – minimize clutter and text and use whitespace to make the UX engaging and friendly.
  • A little color goes a long way
    • Minimize clutter and text and use whitespace to make the UX engaging and friendly.
    • Use small amounts of color because a little goes a long way.
    • Use icons, graphics, and charts to bring the UX to life.
    • Make elements, components, and styles consistent to build trust with users.
  • A picture is worth 1,000 words – use icons, graphics, and charts to bring the UX to life.
  • Don't miss the forest for the trees
    • Minimize clutter and text and use whitespace to make the UX engaging and friendly.
    • Use small amounts of color because a little goes a long way.
    • Use icons, graphics, and charts to bring the UX to life.
    • Make elements, components, and styles consistent to build trust with users.
  • Consistency is attractive – Make elements, components, and styles consistent to build trust with users.


List style Type

Use List Style by applying class Class.

jds-list with list-style-none, list-style-circle, list-style-square, list-style-unset, list-style-decimal, list-style--decimal-leading-zero, list-style-roman, list-style-alphabet, list-style-letter

List styles Roman
jds-list list-style-roman
  • If it doesn't matter cut it – minimize clutter and text and use whitespace to make the UX engaging.
  • A little color goes a long way – use small amounts of color because a little goes a long way.
  • A picture is worth 1,000 words – use icons, graphics, and charts to bring the UX to life.
  • Don't miss the forest for the trees – start with a summary and let users click or choose to see details.
  • Consistency is attractive – Make elements, components, and styles consistent to build trust with users.
List styles Decimal Number
jds-list list-style-decimal
  • If it doesn't matter cut it – minimize clutter and text and use whitespace to make the UX engaging.
  • A little color goes a long way – use small amounts of color because a little goes a long way.
  • A picture is worth 1,000 words – use icons, graphics, and charts to bring the UX to life.
  • Don't miss the forest for the trees – start with a summary and let users click or choose to see details.
  • Consistency is attractive – Make elements, components, and styles consistent to build trust with users.


List Size by line height and font size Pixel (xxs, xs, s, m, l, xl, xxl)

Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as variables that you can use in components or custom CSS.

jds-list with list-size-xxs, list-size-xs, list-size-s, list-size-m, list-size-l, list-size-xl, list-size-xxl


List Size S
list-size-s
  • If it doesn't matter cut it – minimize clutter and text and use whitespace to make the UX engaging and friendly.
  • A little color goes a long way – use small amounts of color because a little goes a long way.
  • A picture is worth 1,000 words – use icons, graphics, and charts to bring the UX to life.
  • Don't miss the forest for the trees – start with a summary and let users click or choose to see details.
  • Consistency is attractive – Make elements, components, and styles consistent to build trust with users.
List Size xs
list-size-xs
  • If it doesn't matter cut it – minimize clutter and text and use whitespace to make the UX engaging and friendly.
  • A little color goes a long way – use small amounts of color because a little goes a long way.
  • A picture is worth 1,000 words – use icons, graphics, and charts to bring the UX to life.
  • Don't miss the forest for the trees – start with a summary and let users click or choose to see details.
  • Consistency is attractive – Make elements, components, and styles consistent to build trust with users.