Component: Action List

Action lists organize content with a brief description and a call-to-action link or button on the right. They're ideal for guiding users to related documents, media files, or webpages while maintaining clarity and accessibility. 

What's an Action List

Action lists offer a two-columned approach to displaying a list of content, where each item has a short description with a corresponding link to a media file, document, or webpage/website. Use this component when users need to decide about where to go amongst a list of services or features being offered. An action list displays a menu of services or features that can be grouped together under a single umbrella. Each item also has an associated link or document/media file. Our action lists are designed to offer a simple table-like approach that works on all devices and will adjust according to text-area size and screen sizes.  

An action list is typically made up of four main elements:

• Two columns: The action list has a table-like approach to displaying content.  It has two columns and a variable number of rows; we recommend that the number of rows is not overwhelming to users. The left column holds the description, and the right column holds a call to action (or button) that links to a document or link.  Note: When spacing is limited, the table will automatically adjust in a responsive way so that users on smaller screens like mobile devices can still navigate with ease.  
• Action item description header: The description header gives a quick, simple overview of what users can expect to find if they click on its corresponding button. This should be short because it is set as a header, which allows users of screen readers to skip from one item to the next easily.  
• Description: An explanation and preview of what users can expect to find when they click on the corresponding button. While we recommend this area is also short and concise, there is more flexibility authors to add content that will help users navigate to the appropriate links or documents. This section is also optional. If description headers are descriptive enough, users may not need additional context.  
• A button: The button will lead users to a document or a webpage.  We recommend the label of the button begin with a call to action, or an active verb with an accurate descriptor such as “Download the ABC brochure” or “Learn about [insert descriptor]”.  Help users accurately predict what they will get once they click on the button.  Refrain from repeating the same label on the same page for all the buttons, and refrain from using nondescriptive labels such as “click here” or “read more” - doing so is bad for both usability and accessibility.  See our button component and accessibility page on buttons for best practices.

Action lists help users quickly compare features or services by organizing information in a formatted table that is easy to scan before navigating to a document or webpage. Our action lists serve as jumping off points for users to navigate to other web pages or documents.  

• Consistent display: Small amounts of content organized in a consistent way can be easier to scan. For our action lists, the formatting is the same for each item, making it easier for users to go down the row of content.
• Improving scannability: Makes web content easier to scan by breaking it into individual items with clear headings; allows users to quickly find and understand key information.
• Direct access to content: Provides quick access to specific information and provides a preview of the content in the description.  
• Mobile-friendly: Action lists use a mobile-friendly inset style. The table display works well on the desktop and their single-column format should render consistently in any screen size and on any touch device.
• Accessible: Items in an action list have designated headers, body text, and buttons are generally interactive, and respond visually to hover, active, and focus states. Disabled and read-only items are also supported.

• Keep text short and clear to help users understand what to expect.
• Use descriptive links and labels for better clarity (see our buttons component page for more usability tips).
• Group items in action lists under a clear, relatable category or umbrella subject. For example, a food menu organizes items into predictable sections like "Appetizers" or "Desserts." Similarly, action list items should share a common, understandable theme.
• Avoid overwhelming users with too many options; focus on highlighting the most important items.

Use an Action List when you need a scannable, two-column layout with a single link per item, but avoid it for long lists, multiple links per item, or when content doesn’t fit under a clear category.

When to Use

• You have a series of features or services that require a single link associated with a header. 
• When a two-column approach makes it easier for users to scan content

When Not to Use

• If the list of items cannot be grouped under a single umbrella
• When you have a long list of links or documents
• If your items require more than one link
• If descriptions are long, consider Accordions or other components.