Anatomy

A list item consists of:
A. Leading Visual — Icon, avatar, or logo to represent the item type or entity
B. Primary Text — Main label or descriptor (e.g., “Paid to Neha”)
C. Secondary Text — Optional metadata like time, description, or subtitle
D. Trailing Element — Amount, CTA, timestamp, or status

Purpose

List items are used for displaying structured, repeatable information across transaction history, settings, notifications, and other scrollable sections.

Layout consistency

Every item follows a consistent horizontal structure: A (start) → B + C (center block) → D (end).

Visual hierarchy

Ensure clear contrast between text layers: primary is dominant, secondary is lighter or smaller, trailing is emphasized if numeric or actionable.

Trailing element

The trailing area should always serve a purpose — action, status, or value.

Leading visual variants

The visual on the left can be customized based on item type.

Interaction

By default, the entire row should be clickable unless explicitly disabled.

Optional add-ons

Support for badges, toggles, secondary actions, or contextual icons is allowed but must follow structure.

Grouping & dividers

Items should be stacked in uniform groups, optionally separated by headings or dividers for clarity.