Lists

Default List Layout

• Default unordered list layout
• Multiple items
  • Second level list here
  • Also with multiple items
    • Third level nested list
    • All lists have multiple items
  • Third item in second level list
• Here's a third item

Warnings

• List of warnings
• Be careful
• Don't panic
• Be kind to everyone

Checks

• List with checked/ticked items
• A positive list
• Everything is checked
• Even the last item

Crosses

• List with crossed items
• This list is a big negative
• Everything is crossed
• Even the last item

Help

• This is a helpful list
• With helpful icons
• Using the question mark convention

Info

• An informational list
• There are multiple items
• Each one has an information icon

Pointers

• Pointers could be arrows, chevrons, carets, triangles
• Or other things...
• Make a choice for your site
• Add more list styles if you want
  • It's not hard for your developer to do
  • Not hard at all
• This item is after a sub list

Individual Items

• List with different items
• The list itself is unstyled
• Each item has its own class
• This one's an info icon
• Just a circle
• Just a disc
• Just a square bullet
• Just a "pointer" bullet
• The last one is a warning

Circles

• This is a basic circles list but the circles are styled
• They're just a little different to the default
• You could just style standard lists this way
• Either way, it's nice to have an extra option

Circle Icons

• There are "circle" versions of the icons
• This one is a check
• This is a cross in a circle
• A circle warning on this one
• Help please, in a circle
• This is a pointer

Discs

• This is a basic discs list but the discs are styled
• They're just a little different to the default
• You could just style standard lists this way
• Either way, it's nice to have an extra option

Disc Icons

• There are "disc" versions of the icons
• This one is a check
• This is a cross in a disc
• A dosc warning on this one
• Help please, in a disc
• This is a pointer

Squares

• This is a basic square circle bullet list
• But the squares are styled
• They're just a little different to the default
• You could just style standard lists this way
• Either way, it's nice to have an extra option

Square Icons

• There are "square" versions of the icons
• This one is a check
• This is a cross in a square
• A circle warning on this one
• Help please, in a circle
• This is a pointer

Mixing Up Lists

Individual items can override the list style. This is a "checks" list.

• List with different items
  1. Sub lists are possible
  2. Here's a second item
• Start with checks
  • Sub lists can be ordered or not ordered
  • It's not a list without two or more items
• This one is crossed
  • Sub lists can be styled too
  • This one has checks under a cross
  • But for testing we override an item with a warning
• Lastly a warning