Switch to WilmingtonList Action
The list actions pattern presents the user with a list of items that each have one or more associated actions. All actions are applied to the item itself, not the list overall. The header signals the start of the list and provides the title. Each item is required to have a title and an action element. The optional icon and subtitle can add further clarity if needed.
Variants
The design of the list item depends on the type and number of associated actions.
Standard List Actions
Single Action List Items
Multiple Action List Items
States
On hover, the arrow on standard list action items is animated to push to the right, indicating that the button will move the user forward. The buttons in the single action variant have the same hover behavior as the button component. The icons on multiple action list items can animate to draw attention to the desired actions.
Design Environment
Use this pattern to present items that typically appear in multiples, even if there only happens to be one in a given list. Make sure to include enough space when placing this pattern next to other click targets and icons.
Microcopy
The list title, item title and item subtitle should all be kept to a single line of text. Use sentence case for the list and item titles as well as the subtitle. Do no include end punctuation. Follow the guidelines for the general button component.