List

Lists are used to group items in a bulleted or numbered list. Semantic lists should be used every time a list of things is presented, including a list of news articles or search results.

Code

Unordered List

<ul class="{ul-custom} {ul-custom-recursion} {ul-custom-layout} {ul-custom-bullet}">
    <li>{content}</li>
    …
</ul>

Ordered List

<ol class="{ol-custom} {ol-custom-recursion} {ol-custom-layout} {ol-custom-list-style}" type="{html-type}">
    <li>{content}</li>
    …
</ol>

Definition List

<dl>
    <dt>{content (term)}</dt>
    <dd>{content (definition)}</dd>
    …
</dl>

Classes

{ul-custom}

Defines the list style for the bullets for each item in the list.

Default
Unordered lists will be displayed with a black disc for top level items, an open circle for single nested items, and a square for double nested items.
Custom (.custom)
Custom bullets will have a red square for the bullet, and the browser default for any sublist items. This is required to utilize {ul-custom-recursion}, {ul-custom-layout} and {ul-custom-bullet} classes.

{ul-custom-recursion}

Requires .custom class to be applied to the same element. Defines if the list style for this unordered list will apply to all child unordered lists.

Default
Custom bullets will only apply to the current nesting layer, and list items will display layered (separate lines for each item).
Recursive (.custom.recursive)
This will apply the bullet style chosen to all list items and sub unordered list items from the current nesting layer and lower.

{ul-custom-layout}

Requires .custom class to be applied to the same element. Defines how the list will be presented, either stacked or inline.

Default
List items will display nested on top of each other - a new line for each item.
Inline (.custom.inline)
This will arrange list items inline instead of stacked on different rows for each list item. Do not apply this class to any unordered lists with nested lists.

{ul-custom-bullet}

Requires .custom class to be applied to the same element. Defines any custom bullet styles for list items.

Default
The bullet style will have a red square for the bullet, and the browser default for any sublist items.
No Bullet (.custom.no-bullet)
This will disable the list style (bullet) on list items.
Chevrons (.custom.chevrons)
The list style will be a right pointing chevron on list items.
Cornell.edu style (.custom.cu)
Applies small red squares for all list items and nested list items. Indents the top-level nesting layer.
Nerdy (.custom.nerd)
Allows for the use of emoji as list item bullets. Without further styling, the emoji will default to 🤓. Adding a class of ‘.off’ to an individual list item will change it to 😐.
Custom Emoji (.custom.[class name])
You can customize this in a child theme stylesheet by adding an additional class to it (like .custom.space) and targeting the direct descendant <li> tag and using the ::before pseudo selector.

Due to the variable spacing of emoji, it may be necessary to modify the positioning and padding declarations.

Custom Bullet CSS

ul.custom.space > li:before {
    content: ‘🪐’;
    font-size: inherit;
    line-height: inherit;
    color: #000;
    opacity: 1;
    top: 0;
    left: 2px;
    padding-left: 2.2em;
}

{ol-custom}

Defines the style of all of the numbers in the ordered list.

Default
Ordered lists will be displayed with a number and a period before each item.
Lining Numerals (.lnum)
On an ordered list when using any fonts where numbers descend below the baseline, this will change the font variant for numbers to lay on the baseline. This will work with the two Freight fonts. If a custom font is used, it must support ‘lnum’ in OpenType for optimal compatibility.
Leading Zero (.decimal-leading-zero)
This will add a single leading 0 to single digit using a list-style-type: decimal-leading-zero; declaration.
Custom (.custom)
Changes the numbers in the ordered list to be more prominent and in a light gray circle. This is required to utilize {ol-custom-recursion}, {ol-custom-layout} and {ol-custom-list-style} classes.

{ol-custom-recursion}

Defines if the style for the current ordered list also applies to any child ordered lists.

Default
The styling treatment of the numbers will only apply to the current nesting layer and not to any nested ordered lists.
Recursive (.custom.recursive)
This will apply the bullet style chosen to all list items and sub ordered list items from the current nesting layer and lower.

{ol-custom-layout}

Defines how the ordered list will be presented, either stacked or inline.

Default
The list will be displayed stacked, one list item per row.
Inline (.custom.inline)
This will arrange list items inline instead of stacked on different rows for each list item. Do not apply this class to any unordered lists with nested lists.

{ol-custom-list-style}

Defines how large the numbers in the ordered list will be.

Default
The numbers will reflect a 16px font size. The list numbers will align vertically centered with the first row of text in each list item.
Large (.custom.large)
The numbers will reflect a 32px font size. The list numbers will align vertically centered with the first two rows of text in each list item.

{html-type}

CDS supports all of the type variants supported by native HTML for ordered lists.