Last updated: September 11, 2015 at 18:45 pm

How text-based lists are to be displayed in context on the page. Includes bulleted and ordered lists, their font sizes, bullet styles, line spacing, and other details.

Visual example of the element:

What problem does this element or pattern solve?
Sometimes lists should be used as opposed to tables, and it must be determined if an ordered or unordered list is more appropriate.

The consistent visual treatment of numbered and bulleted lists could instead be included in the typography section. If you do opt to include list formatting in this section, remember to add a cross-reference link to typography.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • Formatting for unordered lists: bullet shape or character, bullet color, size in proportion to copy, spacing between items, indents and line-wrapping, etc.
  • Formatting for ordered lists: font and container colors, container shape, sizes, positioning of numbers within the shape, particularly if the list expands to 2 or 3 digits; spacing between items, indents and line-wrapping, etc.
  • Content guidelines to determine when an ordered list or unordered list is more appropriate.
  • Any differences in formatting when the list consists of single-line items vs multi-line items. Often, list items with multiple lines are given additional spacing between each bullet or number to improve legibility.
  • Do your copy guidelines call for periods at the end of each list item?

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
outlines, unordered lists, ordered lists, listing, series
Related elements within this Style Framework:

Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply