Skip to page content

Lists

Overview

Lists are one of the most important information structures when writing for the web. Since your audience is typically scanning through content, paragraphs make your message harder to understand. If you can break it down into chunks, steps, or any other list of ideas, then you should use a list:

  • unordered / bulleted: when the order of the list items is not important
  • ordered / numbered: when the order of the list items is vital to explaining your message

Both options are available within any section where there is a WYSIWYG (What You See Is What You Get) editor, such as Main/Aside Content sections, within a Content Molecule, or within Asides, Blocks, or Columns. Various styles help to make the lists easier to use, but not all can be used every time:

  • no-bullets: List item sets with this style have no visual bullet, or square, in front of each list item. These are used where a visual bullet would make the content too busy. They should not be used if they remove the perception the content presented is a list.
  • listheading: for List Item text only, not the whole List Item, it makes them stand out more like headings
  • force-full-width: for Lists that are not wrapped around asides only, it forces them to the wider width on a screen

Content Modules using this Layout Component

Example(s)

See the example(s) below for potential solutions for content organization. Please note that not all examples are available as many of these content molecules and components can be flexible. Contact Web Services for creative solutions.

Example Heading

When we provide a list, we can do it

  • like it completes a sentence (with all punctuation),
  • like it introduces a list (with a colon in the paragraph before the list), or
  • like it sets up steps to complete a task with full capitalization and punctuation.

Some lists do not need bullets, so we can use the no-bullets style, however, make sure the content is easily readable and doesn't look like a paragraph:

  • Item 1: like it completes a sentence (with all punctuation)
  • Item 2: like it introduces a list (with a colon in the paragraph before the list)
  • Item 3: like it sets up steps to complete a task with full capitalization and punctuation

Sometimes order is important, so we use ordered/numbered lists by doing the following:

  1. Edit a content block.
  2. Scroll down to the WYSIWYG editor.
  3. Type the first list item (e.g. the first step).
  4. Select or highlight this paragraph.
  5. Select the Insert/Remove Numbered List icon on the WYSIWYG editor.
  6. Press ENTER to create the next list item.
  7. Type the list item.
  8. Repeat steps 6 and 7 until the list is complete.
  9. Select Submit to finish editing the content block.