Lists
Web Style Guide
Using lists in web content is important in order to organize information clearly and make content more accessible for readers. Since visitors tend to skim web pages, lists can make it easier for readers to find what they’re looking for without having to read through long paragraphs. Lists can be added to web pages by clicking the appropriate button in the editor toolbar.
- Bulleted Lists are used for grouping related items that do not require a specific order or presenting a collection of points with equal importance.
- Numbered Lists are used when the order of the items is important as in a step-by-step process.
Styling Lists
By default, lists added using the text editor have simple styling with small bullets or numbers. There are a couple of custom formats that can be applied to lists to make them have more visual importance and appeal.
Check Lists
With a bulleted list selected, choose “Check List” in the Formats dropdown to create a list of items with large checks instead of bullets.
-
Item 1
- Item 2
- Item 3
- Item 4
Step-by-Step List
With a numbered list selected, choose “Step List” in the Formats dropdown to create a list of steps with large, styled, numbers.
-
Step 1
More information about step 1.
-
Step 2
More information about step 2.
-
Step 3
More information about step 3.
Smaller Styled Lists
In some situations, a styled list is desirable, but the size is too large, or it creates too much visual weight. In this case, style the list as described above, then apply the “Small List” style from the Formats dropdown.
Example Small Check List:
-
Item 1
- Item 2
- Item 3
Example Small Step List:
- Step 1
- Step 2
- Step 3