Skip to main content

Listing

Listings are flexible components, which can receive different types of components internally. However, some rules must be followed to ensure the consistency of the experience.

Simple listing​

The simple listing is based on the List component and its variations. In general, it is recommended to respect the positioning and function of the internal elements. Avoid left button and right checkbox, and also avatar before checkbox, for example.

Simple items​

Items with Checkbox​

Clickable items​

Items with Icon​

Items with Avatar​

Customizable listings​

Customizable list follows the same listing rules, but allows adaptations through modification of the content column.

In this type of listing it is possible to add components and structures according to the needs, without affecting the basic structure of the item.

Clickable elements​

When you have more than one clickable element, be careful not to apply an action to the entire line, but individual actions to each of the inner elements.

Feedback​

To report a problem, request new icons, request new component use cases, ask questions, share suggestions, or report bugs, get in touch through our Slack channel #tangram-design-system.