Info Row Item
Dense rows for inbox-style and list views — leading visual, stacked primary/secondary/tertiary lines, and a top-right meta slot. Use inside a list container (not a DataTable).
Basic row
Primary / Secondary / Tertiary / Meta
Four text fields cover most inbox, contact, and order-list use cases.
With leading avatar
Drop an Avatar (or thumbnail, icon) into the Leading slot
Emphasis tones
Accent bar + leading dot signal status at a glance
Use critical for flagged, warning for due-soon, success for completed, info for general.
Selected
Persistent tinted fill for the active row
Pair with routing or a detail panel to indicate the current selection.
Hover-to-reveal checkbox
Outlook-style avatar → checkbox swap
Hover a row to reveal its checkbox; click to check. Once any row is checked, all checkboxes stay visible.
Selected: Candice Wu
Compact density
52px rows for tight layouts
Drops the Tertiary line and tightens padding — use for sidebars, drawers, and notification panels.
Borderless
Drop the top + bottom hairlines
Bordered (default) vs Borderless side by side. Use Borderless when the row sits inside another container that already has its own chrome (a card, a popover, a side panel), or when you want a quieter list without internal dividers.
Default (bordered)
Borderless
Two-line rows
Primary + Secondary center vertically when Tertiary or Meta is omitted
The row auto-collapses to a 2-row grid so the text stack centers against the leading avatar — no Compact flag needed.