Selection with avatar & lines

When to use

Use when each list item contains complex or detailed information that requires more context.

Anatomy

  1. Title
  2. Image
  3. Radio button
  4. Checkbox
  5. List box

 

 

 

 

 

Variations

 

  1. List items with left icon
  2. List items with text only
  3. List items with top header
  4. List item with three lines

 

 

 

 

States

  1. Enabled
  2. Hover
  3. Selected
  4. Focused (on enabled state)
  5. Disabled