Style guide

Lists

Numbered lists

Ordered lists have a number in front of them. Adding a period at the end is discretionary. If it adds clarity, do it, otherwise it is fine to omit. The intention was to use double-digit indices, but unfortunately these are not available in the web font service.

This limits ordered lists to nine items, but that is a reasonable issue to overcome.

  1. First item in the ordered list
  2. Second item in the ordered list
  3. Third item in the ordered list inside of a paragraph block

  4. A heading inside of an ordered list Sometimes a list is more comlicated than a series of short words and phrases. Sometimes a list contains a lot of content with additional formatting.

  5. First item in the ordered list
  6. Second item in the ordered list
  7. First item in the ordered list

Bullet lists

Unordered lists as a component have multiple uses besides running text.

Runnning text example

  • Do not need full stops at the end
  • Can contain paragraphs and other formating
  • Can be nested, but avoid more than one level

Without bullets

  • Do not need full stops at the end
  • Can contain paragraphs and other formating
  • Can be nested, but avoid more than one level

Definition lists

A curious beast unique to the web. A definition list consists of terms and data. Each definition can have multiple terms.

Term
This is the definition of that term, which both live in a dl.
Another term
And it gets a definition too, which is this line.
And another term
dt terms may stand on their own without an accompanying dd, but in that case they share descriptions with the next available dt. You may not have a dd without a parent dt.

Dash List

Alternative to bullet dashes for an unordered list. Used on projects as a list of rolers. Modified with .small class.

  • Designer
  • Developer
  • Project Manager

List Group

Negative margin is applied to the container .list-group either side to accommodate hover styles.

List group item
List group item
List group item