Description
List of text items
Design
Default style
The default style for bulleted lists has traditional round bullets. Use this style in most cases. No special code or styling required-- it's the default.
Fancy styles
There are times when we may want to use our fancy style to add visual interest. Fancy style contains two optional flourishes: a horizontal rule between list items and the WSB yellow triangle for the bullet. Use these sparingly, and only when there are 3 or fewer list items.
Fancy - Horizontal rule only (often used with bolded keyword)
Implementation:
To the <ul> element, add Bootstrap class="list-unstyled;"
Add an <hr class="hr-gray"> after each list item, except for the last list item.
To achieve the font styles like the screenshot, apply them in the wysiwyg. Use <br>s to create line breaks if needed.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<ul class="list-unstyled"> <li><b class="text-blue">One year </b><br>Lorem ipsum dolar quoad erat sum blah meh.</li><hr class="hr-gray"> <li><b class="text-blue">In person </b><br>Lorem ipsum dolar quoad erat sum blah meh.</li><hr class="hr-gray"> <li><b class="text-blue">Relevant </b><br>Lorem ipsum dolar quoad erat sum blah meh.</li> </ul> |
Fancy - Horizontal rule and yellow triangle bullet
Implementation:
OK to have up to 4 items.
To the <ul> element, add Bootstrap class="list-unstyled;"
To each <li> element, add WSB class="wsb-triangle"
Add an <hr class="hr-gray"> after each list item, except for the last list item.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<ul class="list-unstyled"> <li class="wsb-triangle">Lorem ipsum dolar quoad erat sum blah meh.</li> <hr class="hr-gray"> <li class="wsb-triangle">Lorem ipsum dolar quoad erat sum blah meh.</li> <hr class="hr-gray"> <li class="wsb-triangle">Lorem ipsum dolar quoad erat sum blah meh.</li> </ul> |
Use When
Lists are a great way to make text more scannable and digestible. Instead of paragraphs, use lists when possible.
Editorial Guidelines
Follow our general Web Copy General Guidelines. Keep copy short. Each bullet should be a single phrase. Action-oriented phrases (starting with a verb) are a good way to connect with users.
Design Assets Needed
- None