List item¶

Usage¶

Design¶

Code¶

Example¶

Action list items¶

If the entire item is clickable, wrap the content inside a <button> or <a> element and apply the .list-item-action helper class for hover and focus styling. Use <a> when the action navigates to another page or resource, and <button> when it triggers an in-page action.

The item should be placed inside a <ul> + <li> structure to preserve list semantics.

Use aria-labelledby and aria-describedby on the interactive element to provide a concise accessible name (the title) and description, instead of exposing all inner text as the accessible name.

Metadata¶

Use .list-item-metadata to display supplementary contextual information below the description, such as workspace names, contributor counts, document links, or status badges. Items within the metadata row can be separated with .list-item-metadata-divider, which renders a small dot separator.

Unread state¶

Use the .unread class on .list-item-title to indicate unread items with a bold title and a dot indicator.