list

• Lists can inherit cdr-text modifiers to make any text a list
• Follow the spacing requirements outlined in Cedar's typography and spacing guidelines

Create structured content with a list. Don’t use a list simply for formatting purposes.

Break up chunks of content to make the information easier to scan:

• Separate consecutive lists on a page with a heading for each list
• Start each item with a noun or a verb

Use similar phrases or clauses with the same grammatical structure. For example:

• Product: Zippered hand pockets; chest pocket with hidden zipper
• Materials: Snowshoes: plastic; poles: aluminum
• Duration: High: 4 hrs. 15 min.; low: 48 hrs. 20 min.

Use multi-column lists when:

• Specific ordering is not required
• Listing items with a single word or very short phrases
• Space is minimal
• Viewing items briefly is more beneficial than scrolling

Every item in a list must:

• Start with a capital letter and use sentence case
• Use semicolons when linking independent clauses and product details in the list

Do

Do end each sentence with a period except last sentence.

Don't

Don't add terminal punctuation.

Do

Do link independent clauses and product details.

Don't

Don't link unrelated items together.

What Cedar provides

Use CdrList to create structured lists, which are easier to navigate than simple tables.

Development responsibilities

When using this component, here's what you are responsible for:

• Organize lists so users can understand the relationship and grouping of information
• Ensure information, structure and relationships conveyed through presentation can be programmatically determined or are available in text (Level A)

Use explicit list markup allowing users to:

• Rapidly browse
• Navigate a page using list content
• Announce the number of items in each list when using screen readers

When creating nested lists, ensure they are coded properly. Always check that:

• List items are contained within one list
• Spacing does not break a list into multiple individual points
• Proper semantic tags are used: either <ol> or <ul>
• Proper structure is used to provide a visual list (don’t rely on indentation)
• Special characters are not used to create a list

For projects that cannot make use of the Vue.js component, the CdrList styles are available through the @rei/cdr-component-variables package as SCSS and LESS mixins. These can be applied to plain HTML elements. See examples on the component variables page.

Visual style and semantic meaning are managed independently by providing:

• Element to the tag prop
• Style to the modifier prop

By default, the CdrList component renders as an unordered and undecorated "bare" list. To use an ordered list, pass <ol> to the tag property.

<cdr-list tag="ol">
  <li> item one </li>
  <li> item two </li>
</cdr-list>

The CdrList component has decoupled the semantic tags <ul> and <ol> from visual presentation.

It’s possible to render a semantic ordered list <ol> as a visually non-styled or bulleted list using the cdr-list modifiers. With this decoupling, individual list items can contain a variety of HTML elements, including paragraphs, headings, form elements, and other (nested) lists. Make sure content is structured and follows design guidelines.

Tag variants

Unordered lists:

• Used when the order of the items is not relevant
• Consists of one <ul> element and multiple list item <li> elements

Ordered lists:

• Used for sequential information
• Consists of one <ol> element and multiple list item <li> elements

Nested lists:

• Every cdr-list can be nested into another list
• Assistive technology can easily inform users about the number of steps

<cdr-list>
   <li> Unordered list item text
     <cdr-list tag="ol">
       <li>Ordered list item text</li>
     </cdr-list>
   </li>
 </cdr-list>

Modifiers

The tag itself does not determine display—add a modifier for list styles. Add one of the following variants to the modifier attribute of the cdr-list tag to change the visual presentation: