Component proposal: Service List Item #6439

bellepx0 · 2025-03-12T18:46:05Z

bellepx0
Mar 12, 2025

Component name

Service List Item

Component description

Related Resources

Design: Figma
Help users to...Manage benefits and tools pattern proposal
Critical Action component proposal
Veterans Affairs Design System Documentation on Service List Item
Veterans Affairs Design System Documentation on "Help users to…Manage benefits and tools" pattern

The Service List Item component provides a structured, scannable way for Veterans to track and manage their VA benefits and services. As part of the "Help users to… Manage benefits and tools" pattern, this component ensures that critical benefit details, statuses, and next steps are presented clearly, consistently, and accessibly across VA digital products.

By summarizing key benefit information in a concise, interactive format, the Service List Item:

Consolidates benefits information into a structured, easy-to-scan format, reducing the need to search across multiple sources.
Improves usability and navigation by standardizing how services are presented across different VA systems.
Reduces cognitive load with clear, actionable service descriptions that help Veterans quickly understand their benefits.
Encourages engagement by making it easier for Veterans to find and act on relevant benefits.

When multiple Service List Items are displayed together, they form a Service List, allowing users to easily compare different benefits and track their statuses in one place. This structured approach reduces the time and effort required to manage VA benefits, making the process more intuitive and efficient.

Please see the Help users to...Manage benefits and tools pattern proposal for more information.

Why USWDS needs this component

The Service List Item component is a crucial tool in improving user navigation, service discovery, and engagement across federal agencies. While originally developed to help Veterans navigate VA benefits, its potential extends far beyond the VA, offering a scalable, adaptable solution for other government agencies facing similar challenges.

Key Interactions and Gaps in USWDS

USWDS provides many fundamental components, but it lacks a standardized, reusable pattern specifically designed to help users discover, understand, and take action on available services. The Service List Item component addresses these gaps by:

Providing structured service presentation – Many federal agencies struggle with disorganized, difficult-to-navigate service/benefit listings. This component ensures consistency in how services are displayed.
Reducing cognitive load – Government benefits and services can be complex. This component simplifies information delivery using clear, user-centered design principles.
Improving discoverability and engagement – A common issue across agencies is that users don’t know what services they are eligible for. This component enhances visibility and encourages action.
Standardizing across agencies – Many agencies reinvent the wheel, creating custom solutions for service listings. A USWDS-backed component would reduce duplication of effort and ensure best practices are applied consistently.

Additional federal agencies that could use the Service List Item component

Social Security Administration (SSA) – To help citizens understand available retirement, disability, and survivor benefits.
IRS – To guide taxpayers through filing status, deductions, and refund tracking.
U.S. Citizenship and Immigration Services (USCIS) – To simplify access to immigration benefits and processing updates.
Department of Education (DOE) – To assist students in navigating federal financial aid and loan forgiveness programs.
Centers for Medicare & Medicaid Services (CMS) – To enhance Medicare and Medicaid enrollment guidance.

How Service List Item Supports Federal Laws and Policies

21st Century Integrated Digital Experience Act (IDEA) – Ensures government websites are modern, easy to navigate, and user-friendly. This component improves service accessibility and usability in line with IDEA’s requirements.
OMB Circular A-11, Section 280 (Customer Experience Guidance) – Aligns with best practices in digital service delivery, focusing on clarity, simplicity, and user-centered design.
Executive Order on Transforming Federal Customer Experience (CX) and Service Delivery – This component supports the White House's initiative to improve public trust in government services by making service information more accessible, actionable, and user-friendly.

How the component works

The Service List Item is a reusable UI component designed to summarize and present key information about a benefit, tool, or service in a structured, easy-to-scan list format. It enhances user experience by providing clear, actionable insights into services while ensuring accessibility and consistency.

Each Service List Item includes key elements that help users quickly understand their status, required actions, and next steps. The component also is part of a list-based pattern, where multiple Service List Items are vertically stacked to create a cohesive "Service List."

Component Structure & Key Elements

A Service List Item consists of the following elements:

1) Header (Required)

Displays the main title of the service or tool.

Includes a chevron indicating that it links to more details.

Can optionally include an icon to visually represent the service.

Consistency is key: if one item in the list includes an icon, all should.

States include:

Default: The link and chevron are the standard vads-color-link.

Hover: The link becomes underlined and both the link and chevron turn to vads-color-link-active. There is no background shading.

Focus: Similar to the default state, but with a yellow outline. The outline is similar to the focus state of action links.

Active: Similar to the default state, but underlined and with a yellow outline. The outline is similar to the focus state of action links.

Visited: Similar to the default state, but the color of the link and chevron turn to vads-color-link-visited once the link has been visited.

2) Status (Required)

Displayed as a gray Tag component.

Communicates the service/tool's current state (e.g., Active, Pending, In Progress).

Statuses simplify complex internal state changes, ensuring clarity for users.

3) Critical Action (used to be called Critical Information)

Highlights urgent or important updates about the service.

Directs the user to immediate action paths.

Future enhancements will improve color contrast, focus states, and accessibility.

4) Details (Required)

Provides contextual information in a "Label: Value" format, such as:
"Approved on: May 5, 2011"
"Next appointment: March 10, 2025"

Can display 1 to 5 pieces of key information per item.

5) Additional Link (Optional)

Some items may include a supplemental link for further actions.

States include:

Default – Standard hyperlink styling.

Hover, Focus, Active, and Visited states to ensure accessibility.

Real-world examples

No response

When to use this component and when to consider something else

When to use Service list item
When you want to show benefits or tools the user is currently enrolled in or has access to.

When not to use Service list item

When you are representing items that are neither a benefit nor a tool. Do not use the same visual appearance or structured data to represent items that are not a benefit nor a tool. If you want to group short, related pieces of information that are not benefits or tools, consider using the Card component.

When you want to put links, radio buttons, or checkboxes in a container. There are some components that have variations with containers around them. These might look like Service list items, but they are distinct. Service list items are exclusively for benefits and tools, offer a brief snapshot of information, and link to another page with more details. The guidance within the Not a card section of the Card component also applies to the Service list item.

When you want to show benefits within a form. Do not use this component to show benefits or services in an interactive list with checkboxes or other selection methods.

When you want to display content in an unordered list. Content that can be shared with bullet points should use an unordered list. Find more information in the List component and the Bulleted list style guide.

Usability considerations

Teams used the Card component before this component existed. When evaluating if your team needs to use Service list items instead of cards, consider if your content is either a “benefit” or “tool,” as defined in the Usage section.

Statuses should be normalized with CAIA so that the same terms are used when the same meanings are intended (for example, “pending” versus “in-progress”). CAIA will define which of those is correct across benefits and tools.

Accessibility considerations

No response

Who’s involved

VA Authenticated Experience Design Pattern team

Adam Whitlock @adamwhitlock1 - Engineering Lead
Belle Poopongpanit @bellepx0 - Engineer
Christine Rose Steiffer @ChristineRoseSteiffer - Design Lead
Lynn Stahl @msbtterswrth - Product Manager
Becky Phung @beckyphung - Product Owner

amycole501 · 2025-03-26T13:53:18Z

amycole501
Mar 26, 2025

Hi @bellepx0 I just requested access to the Figma file. I'll be reviewing this and the pattern proposal in the coming weeks.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Component proposal: Service List Item #6439

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Component Structure & Key Elements

Real-world examples

When to use this component and when to consider something else

Usability considerations

Accessibility considerations

Who’s involved

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Component proposal: Service List Item #6439

Uh oh!

Uh oh!

bellepx0 Mar 12, 2025

Component name

Component description

Related Resources

Why USWDS needs this component

Key Interactions and Gaps in USWDS

Additional federal agencies that could use the Service List Item component

How Service List Item Supports Federal Laws and Policies

How the component works

Component Structure & Key Elements

Real-world examples

When to use this component and when to consider something else

Usability considerations

Accessibility considerations

Who’s involved

Replies: 1 comment

Uh oh!

amycole501 Mar 26, 2025

bellepx0
Mar 12, 2025

amycole501
Mar 26, 2025