List is a collection of list item and often used to represent similar content vertically.

A list can be used for data showcasing, navigation or menus as in Dropdown.

Anatomy

A. List

1. Title (optional)
2. List item
3. Divider (optional)

B. List item 4. Icon (optional) 5. Label 6. Secondary text (optional) 7. Action (optional) 8. Border (optional)

https://invis.io/GAYEBEEYPW8#/428289867_List_Item_-_Anatomy

Spacing

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FRilBAPbeSFcvhrnaqxSemB%2FTrustYou-UI---Components%3Fnode-id%3D1121%253A29389

Border

https://invis.io/FHYEHB8Y6Q4#/428332302_List_Item_-_Border

Action

https://invis.io/WUYEBB3NGV7#/428289123_List_Item_-_Action

Behaviour

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FRilBAPbeSFcvhrnaqxSemB%2FTrustYou-UI---Components%3Fnode-id%3D1121%253A29266

States

https://invis.io/5W10BK6ZAQHC