Lists

Simple list

For a simple list of text items use the list and list-item classes.

Condensed

For a tighter list add the list_condensed class.

Clickable

To indicate that an item can be clicked add the list_clickable class.

Moving and sorting

Read more in drag and drop pattern.

List of cards

List with action buttons

To add secondary action buttons use the list-item__actions class and RoundButton component.

List with icons

List with two lines

List with two lines and icons

List with two lines and avatars (users)

To show a list of users. The primary text should be the user’s real name if available, the secondary text the email address.

For selecting a user / credential

Add an radio button since else it can be hard to understand it’s clickable.