Lists

Lists are UI components that organize content vertically for quick scanning — from simple selection lists to multi-line rows with metadata.

Choose the right pattern

Pattern	Layout	Best for
List	Vertical rows	Scanning names, settings, selectable items, dense metadata
Grid view	Tile grid	Visual thumbnails (images, files, media previews)
Carousel	Single focus + strip	Slideshow of one item at a time with navigation

Principles

• Logical — meaningful order (alphabetical, numerical, chronological)
• Actionable — easy to identify and act on items
• Consistent — uniform layouts for icons, text, and actions

Row types

Type	Content
Single-line	One line per item — optimal scannability
Two-line	Primary + secondary text
Three-line	Title, description, metadata (e.g. notifications)

Advanced features (datatable-style)

Datatable behaviors used in Company web products are documented elsewhere. Full datatable page is deferred — summary below:

• Selected row highlight; inline edit on hover (pencil icon)
• Action column per row; column sort icons; add/reorder columns via drag-and-drop
• Implementation in Company web: ngx-datatable, dx-data-grid

Conflict noted: overlap with Layout → Datatable — unify when that page is built.

Example — single-line

Example — two-line

Guidelines

• Hover state uses secondary control background.
• Active item uses primary color with inverted text.
• Items separated by divider lines, not individual borders.