Skip to content

Action List

alpha

Reference the Action list interface guidelines for details on where and how to use Action list.

Action list

Action list is a ul list designed to contain list items.

Variants

ClassDescription
ActionListDefault styles
ActionList--dividedShow dividers between items
ActionList--subGroupIf Action List is nested as a sub-list
ActionList--treeTree-view specific styles

Default

Item dividers

Nested sub list

Action list divider

List item li for separating groups of content

Variants

ClassDescription
ActionList-sectionDividerDefault subtle divider line
ActionList-sectionDivider--filledThicker divider line
ActionList-item-descriptionOptional section header secondary text

Default

Filled

Divider with label text

When using a section label for a group, give the h3 an id to be referenced by the group ul

Filled with section label

Default with section label

Default with section label + description

Action list item

List item li handling semantics, state and interactions

Variants

ClassDescription
ActionList-itemDefault styles
ActionList-item--hasSubItemItem contains a sub item ul
ActionList-item--subItemIndent + small font size for sub item li (optional)
ActionList-item--navActiveNav item and aria-current
ActionList-item--dangerItem is destructive

Action list item content

Contains and places all child elements within action list item. Can be either an a href tag for list link items, or a button for items that provide an event on Action List Item li.

Variants

ClassDescription
ActionList-contentDefines the overall layout grid
ActionList-content--sizeMedium40px row height
ActionList-content--sizeLarge48px row height, default for touch devices
ActionList-content--visual16Creates left padding for sub list if leading visual exists
ActionList-content--visual20Creates left padding for sub list if leading visual exists
ActionList-content--visual24Creates left padding for sub list if leading visual exists
ActionList-content--hasActiveSubItemHandles active nav state if child item is active
ActionList-item-actionmin-height + default styles for visual slot
ActionList-item-action--leadingSlot: multi/single select
ActionList-item-action--trailingSlot: Button, collapse icon
ActionList-item-visualmin-height + default styles for visual slot
ActionList-item-visual--leadingSlot: SVG or graphic like Avatar
ActionList-item-visual--trailingSlot: SVG or text
ActionList-item-labelItem text
ActionList-item-descriptionWrapWraps label/description
ActionList-item-descriptionWrap--inlineDisplay description inline with label
ActionList-item-descriptionItem description (block by default)

Basic text only item

Size (all options)

Visuals (all options- leading & trailing)

Trailing visual as text

Inline description

Active navigational item

Danger item

Actions

Leading action: single select listbox

Leading action: multi select listbox

Trailing action: collapse