...
They are composed of items containing primary and in some cases supplemental information, which can be shown as text, icons, or images.
...
a leading icon. These should only be used if the list can contain several types of object. If all items are of the same type, an icon should not be used.
a leading image.
up to 2 secondary lines of text. Secondary lines cannot have their own leading icons or images.
extra metadata, such as a tag, text, or an icon. These should be positioned to the right of the item, centered vertically.
action icons, such as delete. These should only appear on hover or when an item is selected. They should be positioned to the right of the item, centered vertically (replacing the extra metadata, if it exists).
Single-line list | Two-line list | Three-line list | |
---|---|---|---|
Full list | |||
Single Item | |||
Single item with icon / image | |||
Single item with multi select |
Lists can also have:
A a preceding label at the top of the list, to inform the user about the items included in the list.
A a Search field can be used for long, scrolling on long lists, allowing users to help the user to find items easily.
Internal Logic
...
State | Image | Comment |
---|---|---|
Regular | ||
Hover | ||
Active | ||
Disabled | ||
Focused | ||
Focused, Hover | ||
Focused, Active | ||
Focused, Disabled |
Interaction
On hover, the row will be highlighted and Check boxes or Icon buttons will appear, where applicable.
When the label is truncated (item name), hovering over it will show a Tooltip with the full label.
There are three possible selection modes:
Single Selection | Multi-select check boxes | Smart Interaction | Screenshot | |
---|---|---|---|---|
Single Selection |
| |||
Multi-select check boxes |
| |||
Smart Selection |
|
When scrolling, the title and Search bar should stick to the top and remain visible.
...
Zeplin link | Screen thumbnail |
---|---|
<<Short Zeplin link. You | |
Code
<<a box containing the code - discuss with Femi>>