List

The list reset provides styles and modifier classes to semantic HTML5 ordered, unordered, and definition lists.

Styles

Nested lists

If any ordered/unordered list is nested within any ordered/unordered list, it's bottom margin is removed.

Unstyled list

To unstyle an ordered/unordered list (e.g. remove it's indicators), simply add a .cwf-list--unstyled class to it.

Inline list

To make an ordered/unordered list inline (e.g. horizontal), simply add a .cwf-list--inline class to it.

Examples

Elements

The following is an example of an unordered and ordered list.

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3

Nested

The following is an example of a nested unordered list.

Unstyled

The following is an example of an unstyled, unordered list.

Inline

The following is an example of an inline, ordered list.

Definition

The following is an example of a definition list.

Term 1
Definition 1
Term 2
Definition 2
Term 3
Definition 3