List row
List rows combine a set of content inside a horizontal layout.
- Skin
- Marko
- React
- Container
- Lead element
- Main content
- Trailing element
Lead accessory
A lead accessory is optional. Common lead accessories include related icons, avatars, images, or selection controls like a checkbox or radio button. There can also be multiple lead accessories for cases like a field with an avatar and a checkbox.
Main content
The content typically contains the primary details. Common elements include titles, subtitles, descriptions, and overlines.
Trailing accessory
A trailing accessory is optional. Trailing accessories commonly afford interaction and can appear across multiple items in a single list row.
Common trailing accessories are navigation disclosure icons, external link disclosures, a toggle switch, a secondary value, an infotip button, or other interactive elements.
Dividers
List rows can have a divider to help discern the shape of the container when the content is dense.
Tap targets
List rows can be directly actionable or static.
Actionable
The entire list row container is one tap target.
Static
Only nested elements are actionable.
Disabled items
A list row can be disabled if pre-requisites aren’t fulfilled. This is helpful for providing layout consistency and indicating that an option may become available later.
Text overflow
Content expanding beyond the width of the container can either wrap indefinitely or truncate after a certain number of lines.
Content indefinitely wraps to a new line by default.
Height
List rows can flex vertically according to their content.
In general, list rows on small screens should aim for a minimum height of 48px for a tap-friendly experience.
Width
List rows flex horizontally with their parent container. The overall width is determined by the page layout.
However, avoid allowing list rows to extend larger than 480px. The main content in list rows should maintain a readable line length.
Small
List rows commonly expand the full width of their parent container on small screens.
Medium
List rows adjust to take advantage of the additional visible space available on medium screens. Use a multi-column layout to keep list rows to a comfortable width.
Large
The list row width and layout adjusts on larger screens to take advantage of the additional space on large screens. Use a multi-column layout to keep list rows to a comfortable width.
Icons
Do use or omit a leading icon for every item in a group.
Don’t mix items with and without leading icons in a group.
Nested elements
Do keep list row elements simple with a single interaction per item. If another interactive element is needed, place it in a new row above or below.
Avoid nesting multiple interactive elements in list rows. This increases the chance of mistaken taps and may be difficult for users with motor issues to navigate.
Congruent list rows
Do omit dividers for congruent list rows.
Don’t include dividers on multiple list row elements within a row group.
Width
Adjust the width of the list rows by shifting to different layouts like multi-column, primary-secondary, or list-detail views.
Avoid full width rows on larger screens. End content can be lost and the excessive line lengths make it difficult to read longer content.
