List

A structured vertical list for displaying items with optional icons, secondary text, and actions.

Preview

• Getting started guide

  Introduction to the design system
• Component library

  Browse all available components
• Changelog

  Recent updates and releases

Simple list (no border)

• Alice Martin
• Bob Chen
• Carol Davis

Anatomy

• Icon (optional) -- leading icon or avatar for visual context.
• Content -- primary text with optional secondary line.
• Action (optional) -- trailing icon or button (e.g. chevron, delete).

Props

Prop	Type	Default	Description
bordered	boolean	false	Wrap list in a visible border
children	React.ReactNode	--	List items

List.Item

Prop	Type	Default	Description
icon	ReactNode	--	Leading icon
primary	string	--	Primary text
secondary	string	--	Secondary text
action	ReactNode	--	Trailing action
onClick	() => void	--	Click handler

Code example

React

import { List } from '@thepace/lexicon/components';

<List bordered>
  <List.Item
    icon={<BookmarkIcon />}
    primary="Getting started guide"
    secondary="Introduction to the design system"
    action={<ChevronRightIcon />}
    onClick={() => navigate('/start')}
  />
  <List.Item
    icon={<GridIcon />}
    primary="Component library"
    secondary="Browse all available components"
  />
</List>

Vanilla HTML

<ul class="lex-list lex-list--bordered">
  <li class="lex-list__item">
    <svg class="lex-list__icon"><!-- icon --></svg>
    <div class="lex-list__content">
      <div class="lex-list__primary">Getting started guide</div>
      <div class="lex-list__secondary">Introduction to the design system</div>
    </div>
    <svg class="lex-list__action"><!-- chevron --></svg>
  </li>
</ul>

CSS class reference

Class	Purpose
.lex-list	Base list reset
.lex-list--bordered	Bordered container
.lex-list__item	List item row
.lex-list__item--clickable	Clickable item
.lex-list__icon	Leading icon
.lex-list__content	Text wrapper
.lex-list__primary	Primary text
.lex-list__secondary	Secondary text
.lex-list__action	Trailing action

Accessibility

• Use <ul> or <ol> for semantic list markup.
• Clickable items should use role="button" or be wrapped in <a> / <button>.
• Trailing actions need aria-label if icon-only.

Guidelines

Do

• Use secondary text to add context without cluttering the primary label.
• Use the bordered variant when the list stands alone (not inside a card).
• Keep primary text concise — one line maximum.

Don't

• Don't mix interactive and non-interactive items in the same list without clear visual distinction.
• Don't use a list for tabular data — use a Table instead.