• Special Publication:  Public Website Visual Style Guide
  • August 2015

Lists

Use the list styles below to organize information for readers into lists and maintain accessibility and compliance with federal accessibility laws.

HTML Tags, Styled

Expand or close the following content.Definition <dl>

Expand or close the following content.Ordered <ol>

Expand or close the following content.Unordered <ul>

List Patterns

Expand or close the following content.Ordered List—Legal Numbering .ol-legal

Expand or close the following content.Ordered List—Chapter .ol-chapter

Expand or close the following content.Ordered List—Part .ol-part

Expand or close the following content.Ordered List—Section .ol-section

Expand or close the following content.Ordered List—Standard Outline .ol-standard-outline

Expand or close the following content.Ordered List—Standard Outline Starting with Uppercase Alphabet .ol-standard-outline-roman

Expand or close the following content.Search Results

Expand or close the following content.Teaser List <ul class="teasers">

Expand or close the following content.Unordered List—List Photos .list-photos

Expand or close the following content.Unordered List—Unstyled .list-unstyled

Helper Classes

Listed alphabetically by class name. Add these classes to the respective <ul> or <ol> tag.

List Helper Classes
Class Description
.list-no-margin Add to either <ul> or <ol> to remove the margins from a list
.ol-decimal Displays an ordered list using numbers (e.g. 1, 2, 3)
.ol-decimal-leading-zero Displays an ordered list using numbers with leading zeros (e.g. 01, 02, 03)
.ol-lower-alpha Displays an ordered list using the lowercase alphabet
.ol-lower-greek Displays an ordered list using the lowercase Greek alphabet
.ol-lower-roman Displays an ordered list using lowercase Roman numerals
.ol-upper-alpha Displays an ordered list using the uppercase alphabet
.ol-upper-roman Displays an ordered list using uppercase Roman numerals
.ul-list-bullet-check-mark Add to the <ul> tag to have each <li> display a FontAwesome check mark instead of a bullet
.check-mark-bold-blue Add to the <ul> tag to have each <li> display a FontAwesome check mark instead of a bullet colored web-bold-blue
.list-inline Displays an unordered list horizontally inline
.ul-list-inline-comma Add to the <ul> tag to have an unordered list display horizontally inline with a comma and a space between list items
.ul-list-inline-pipe Add to the <ul> tag to have an unordered list display horizontally inline with a pipe between list items