Liferay.Design / Lexicon-1
/
Get StartedNews
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

List

Sign In

List is a visual representation of a dataset that provides more flexibility for arranging the data to display than a table and that is less visual explicit than a card view.

Usage

list entry in default state

A list view is useful for comparing entries among them that do not need exhaustive comparison. In case you need exhaustive comparison use the table view.

A list allows you a free way of displaying information. While the table isn't meant to have several text labels in a column, list is the pattern for doing that, as you can see in the following examples.

Not all the element in a list entry are mandatory, feel free to delete and include the ones you need.

When a list is used together with management bar, the list entries must include the checkbox, as the selection and actions are reflected in the management bar.

List group

Whenever you need to group series of list entries, you can use the list group heading for that.

list group includes a heading

Row interactions

  • Selecting a row is only possible by using the checkbox.
  • Text elements in the row can be configured as links to navigate.
  • A row can have none or several actions associated. When there is only one action and it can be represented by an icon, you don't need to make use of the actions menu. Otherwise, use the actions menu on the right side of the row.
  • If the action you want to perform of is "Edit", place it as a link in the title to navigate to an edition screen for the element.

Row states

Default state

list entry in default state

Selected state

list entry in selected state

Attributes

list attributes

Example of use

list with 3 entries, one in default state, one in selected state, one with actions menu open

Something to improve? Report an issue!
Menu