Lists (legacy)

For a consistent visual style use the list classes.

Gunnel v17 no longer contains list classes. These are easily reproducible with standard tailwind classes. For information about migrating, see Upgrade to v17

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.

Search Gunnel

Powered byAlgolia