A

Written by

pw

in

Uncategorized

List-Item

A list item is a single entry in a collection presented as a list. Lists organize related pieces of information so they’re easy to scan and consume. They appear throughout apps, websites, documents, and interfaces — from simple bullet points to complex interactive components.

Types of list items

• Plain text: Single-line entries used for short notes or bullet points.
• Multi-line: Entries that wrap onto several lines for longer content.
• Iconified: Includes an icon or avatar to provide context (e.g., user photo).
• Interactive: Clickable or tappable items that trigger navigation or actions.
• Selectable: Items that can be checked, toggled, or highlighted (e.g., in a to‑do list).

Anatomy of a good list item

• Primary label: The main piece of information (title or name).
• Secondary text: Supporting details (subtitle, timestamp, brief description).
• Visual affordance: Icon, avatar, thumbnail, or status indicator.
• Action controls: Buttons, menus, or checkboxes for inline actions.
• Spacing & alignment: Clear padding and consistent alignment for readability.

Design best practices

1. Prioritize scannability: Keep primary labels short and prominent.
2. Use hierarchy: Distinguish primary and secondary text with size, weight, or color.
3. Provide clear affordances: Make interactive elements obviously tappable/clickable.
4. Optimize for touch: Ensure minimum tappable area (~44–48 px).
5. Handle overflow: Use truncation, wrapping, or expandable details for long content.
6. Maintain consistency: Keep margins, icon sizes, and typography uniform across lists.
7. Consider accessibility: Provide semantic list markup (ul/ol), use ARIA where needed, and ensure focus states and keyboard navigation.

Implementation examples

• In HTML/CSS: use
  /
  with
  1. Common patterns

• Feed: Chronological list with timestamps and content previews.
• Settings: List with labels and trailing controls (toggles, chevrons).
• Menu: Compact clickable items for navigation.
• Search results: List of results with highlighted query matches.

Performance tips

• Virtualize long lists to render only visible items.
• Memoize item renderers to avoid unnecessary re-renders.
• Load images lazily and provide placeholders.

A well-designed list item balances clarity, brevity, and functionality — making information quick to scan and simple to act on.