Switch to Wilmington
DesignDevelop
Version 4.5.1
Overview

List 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 optional icon and subtitle can add further clarity if needed.

Variants

Standard List Actions

Standard

Standard list action items are individual buttons that will navigate the user to a new page. The icon and subtitle are optional. Manipulate the animation by adding or removing the p-list-action__icon--animated and p-list-action__icon--slide classes.

<div class="p-list-action l-margin-bottom--xxlarge">
    <h4 class="p-list-action__title">Standard List Actions</h4>
    <button class="p-list-action__item">
      <i class="p-list-action__item-icon icon icon--card" role="img"></i>
      <span class="p-list-action__item-content">
        <span class="p-list-action__item-title--cta">
          Personal Checking
        </span>
        <span class="p-list-action__item-subtitle">
          Account ending in: 5551
        </span>
      </span>
      <span class="p-list-action__item-actions">
        <i class="icon icon--arrow-without-tail-right p-list-action__icon--animated p-list-action__icon--slide"
          role="img"></i>
      </span>
    </button>
    <button class="p-list-action__item">
      <i class="p-list-action__item-icon icon icon--card"
        role="img" ></i>
      <span class="p-list-action__item-content">
        <span class="p-list-action__item-title--cta">
          Joint Checking
        </span>
        <span class="p-list-action__item-subtitle">
          Account ending in: 5552
        </span>
      </span>
      <span class="p-list-action__item-actions">
        <i class="icon icon--arrow-without-tail-right p-list-action__icon--animated p-list-action__icon--slide"
          role="img"></i>
      </span>
    </button>
    <button class="p-list-action__item">
      <i class="p-list-action__item-icon icon icon--card"
        role="img"></i>
      <span class="p-list-action__item-content">
        <span class="p-list-action__item-title--cta">
          Credit Acccount
        </span>
        <span class="p-list-action__item-subtitle">
          Account ending in: 5553
        </span>
      </span>
      <span class="p-list-action__item-actions">
        <i class="icon icon--arrow-without-tail-right p-list-action__icon--animated p-list-action__icon--slide"
          role="img"></i>
      </span>
    </button>
  </div>
Copy

Single Action List Items

Personal CheckingAccount ending in: 5551
Joint CheckingAccount ending in: 5552
Credit AccountAccount ending in: 5553
Single Action

Single action list action items are contained within <div> tags. Except the optional icon, components within the list item (title, optional subtitle, button) are within <span> tags.

<div class="p-list-action l-margin-bottom--xxlarge">
    <h4 class="p-list-action__title">Single Action List Items</h4>
    <div class="p-list-action__item">
      <i class="p-list-action__item-icon icon icon--card"
        role="img"></i>
      <span class="p-list-action__item-content">
        <span class="p-list-action__item-title">Personal Checking</span>
        <span class="p-list-action__item-subtitle">
          Account ending in: 5551
        </span>
      </span>
      <span class="p-list-action__item-actions">
        <button class="c-button" role="button">
          Deactivate Card
        </button>
      </span>
    </div>
    <div class="p-list-action__item">
      <i class="p-list-action__item-icon icon icon--card"
        role="img"></i>
      <span class="p-list-action__item-content">
        <span class="p-list-action__item-title">Joint Checking</span>
        <span class="p-list-action__item-subtitle">
          Account ending in: 5552
        </span>
      </span>
      <span class="p-list-action__item-actions">
        <button class="c-button--primary" role="button">
          Activate Card
        </button>
      </span>
    </div>
    <div class="p-list-action__item">
      <i class="p-list-action__item-icon icon icon--card"
        role="img"></i>
      <span class="p-list-action__item-content">
        <span class="p-list-action__item-title">Credit Account</span>
        <span class="p-list-action__item-subtitle">
          Account ending in: 5553
        </span>
      </span>
      <span class="p-list-action__item-actions">
        <button class="c-button" role="button">
          Deactivate Card
        </button>
      </span>
    </div>
  </div>
Copy

Multiple Action List Items

Personal CheckingAccount ending in: 5551
Joint CheckingAccount ending in: 5552
Credit AcccountAccount ending in: 5553
Multiple Action

Multiple action list action items are contained within <div> tags. Except the optional icon, components within the list item (title, optional subtitle, button) are within <span> tags. Each icon action is a <button>. Manipulate the animation by adding or removing the p-list-action__icon--animated and p-list-action__icon--pop classes.

<div class="p-list-action l-margin-bottom--xxlarge">
    <h4 class="p-list-action__title">Multiple Action List Items</h4>
    <div class="p-list-action__item">
      <i class="p-list-action__item-icon icon icon--card"
        role="img"></i>
      <span class="p-list-action__item-content">
        <span class="p-list-action__item-title">Personal Checking</span>
        <span class="p-list-action__item-subtitle">
          Account ending in: 5551
        </span>
      </span>
      <span class="p-list-action__item-actions">
        <button
          class="p-list-action__icon-action p-list-action__icon--animated p-list-action__icon--pop icon icon--cog"
          role="button"
          alt="Settings"
        >
          <span class="p-list-action__icon-action-label">Settings</span>
        </button>
        <button
          class="p-list-action__icon-action p-list-action__icon--animated p-list-action__icon--pop icon icon--pencil"
          role="button"
          alt="Edit"
        >
          <span class="p-list-action__icon-action-label">Edit</span>
        </button>
        <button
          class="p-list-action__icon-action p-list-action__icon--animated p-list-action__icon--pop icon icon--trash-can"
          role="button"
          alt="Delete"
        >
          <span class="p-list-action__icon-action-label">Delete</span>
        </button>
      </span>
    </div>
    <div class="p-list-action__item">
      <i class="p-list-action__item-icon icon icon--card"
        role="img"></i>
      <span class="p-list-action__item-content">
        <span class="p-list-action__item-title">Joint Checking</span>
        <span class="p-list-action__item-subtitle">
          Account ending in: 5552
        </span>
      </span>
      <span class="p-list-action__item-actions">
        <button
          class="p-list-action__icon-action icon icon--cog p-list-action__icon--animated  p-list-action__icon--pop"
          role="button"
          alt="Settings"
        >
          <span class="p-list-action__icon-action-label">Settings</span>
        </button>
        <button
          class="p-list-action__icon-action icon icon--pencil p-list-action__icon--animated  p-list-action__icon--pop"
          role="button"
          alt="Edit"
        >
          <span class="p-list-action__icon-action-label">Edit</span>
        </button>
        <button
          class="p-list-action__icon-action icon icon--trash-can p-list-action__icon--animated  p-list-action__icon--pop"
          role="button"
          alt="Delete"
        >
          <span class="p-list-action__icon-action-label">Delete</span>
        </button>
      </span>
    </div>
    <div class="p-list-action__item">
      <i class="p-list-action__item-icon icon icon--card"
        role="img"></i>
      <span class="p-list-action__item-content">
        <span class="p-list-action__item-title">Credit Acccount</span>
        <span class="p-list-action__item-subtitle">
          Account ending in: 5553
        </span>
      </span>
      <span class="p-list-action__item-actions">
        <button
          class="p-list-action__icon-action icon icon--cog p-list-action__icon--animated  p-list-action__icon--pop"
          role="button"
          alt="Settings"
        >
          <span class="p-list-action__icon-action-label">Settings</span>
        </button>
        <button
          class="p-list-action__icon-action icon icon--pencil p-list-action__icon--animated  p-list-action__icon--pop"
          role="button"
          alt="Edit"
        >
          <span class="p-list-action__icon-action-label">Edit</span>
        </button>
        <button
          class="p-list-action__icon-action icon icon--trash-can p-list-action__icon--animated  p-list-action__icon--pop"
          role="button"
          alt="Delete"
        >
          <span class="p-list-action__icon-action-label">Delete</span>
        </button>
      </span>
    </div>
  </div>
Copy

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.