Built · v1.0 · Figma set
List Row
List rows are the workhorse of text+: every conversation, contact and setting is a row. One flexible component, leading · content · trailing: replaces dozens of ad-hoc lists. The audit counted 61 uses, more than any other structural piece.
Every row above is the same component. Only the slots change. Flip the theme (top right) and watch it move through Light, Carbon and Navy without a single hardcoded colour.
Use when
Section titled “Use when”Use when
- Listing items of the same kind. Contacts, conversations, settings.
- Offering a tap target that leads somewhere or toggles something.
Don’t use when
- Promoting an offer or CTA. Use an Action Card.
- Laying out a form. Fields are Input, not rows.
Anatomy
Section titled “Anatomy”One vertical frame = a state layer (horizontal auto-layout) plus a divider. The state layer holds three slots, each toggleable and swappable on its own.
- Leading: instance-swap slot: an icon (24px) or an avatar (40px). Toggle with Show Leading.
- Content: Label is always visible (Inter Medium 16). Overline (11, uppercase) and Supporting (13) are optional booleans.
- Trailing: instance-swap slot: chevron, switch, radio, button, badge, timestamp, value, checkmark, or none.
- Divider:
stroke/subtle, 0.5px, toggleable. Layout: paddingX 16, paddingY 12, gap 12.
Variants
Section titled “Variants”Structural variants only. Leading and trailing content swaps via instance-swap properties, never new variants (D-010).
Trailing options
Section titled “Trailing options”Leading options
Section titled “Leading options”States
Section titled “States”Design guidelines
Section titled “Design guidelines”Do / Don’t
Section titled “Do / Don’t”- Keep the Label to one line; let Supporting carry the detail. Both truncate, they never wrap to three lines.
- Pick one trailing element per row. If you need two actions, the row is doing too much. Split it.
Visual style
Section titled “Visual style”Leading icons and the chevron take brand/emphasis green; everything textual comes from the
text roles. Never recolour a row locally. The badge uses feedback/error; a checkmark uses
green. Don’t invent a new “selected” colour.
Behavior
Section titled “Behavior”- Rows are fluid: they fill their container width and the content slot flexes; leading and trailing stay fixed.
- Auto-height: a row with an overline or a wrapped supporting line grows; align to Top when it does, otherwise Middle.
- At the 360 × 667 floor the label and supporting text truncate with an ellipsis. They never push the trailing slot off-screen.
Editorial
Section titled “Editorial”- Label leads with the thing itself, Alex Rivera, Notifications: not a verb.
- Supporting text is a detail, not a second sentence: Sounds & vibration, not “Here you can change sounds and vibration.”
- Overline is a category in ≤ 2 words, uppercase, ACCOUNT, DEVICES.
Accessibility
Section titled “Accessibility”The whole row is one touch target. A minimum of 48 dp tall even when the visible content
is shorter. When the trailing slot is a switch or radio, the entire row toggles it, and the
control carries the state (aria-checked), not colour alone. Disabled rows swap to
text/disabled tokens rather than fading with opacity, so they survive high-contrast mode.
Tokens
Section titled “Tokens”Plus radius/lg on the list container and spacing 16 / 12 for padding and slot gap.