Home/Components/Item row

Item row

A vertical-rhythm row block used for selectable choices, settings rows, and option lists.

Stable .item Generic row primitive

Default

Lead (icon/avatar) · title + sub · trailing meta/action.

EcoCash
Mobile money · instant
Card
2.9 % processing
Bank transfer
CABS, Stanbic, Standard Chartered
Item rows in a card

With selection

Radio-style; the chosen row gets a brand-soft background.

EcoCash
Mobile money · instant
Card
2.9 % processing
Bank transfer
CABS · Stanbic · Standard Chartered
Selectable items

Do & don't

Do

Use the item row when you have a small list of options that need explanation (mobile list is the bigger sibling).

Don't

Use this for tables. A table is a different primitive.

Do

Keep the sub-text under one line — truncate with ellipsis when needed.

Don't

Nest interactions. The whole row clicks once.