Liferay.Design / Lexicon
Get StartedResources
Part of Liferay, IncCode/Content Licenses


Sign In
View in FigmaView in ClayDocumentation

Cards are a specific form of data visualization focused mainly on displaying images.

card with image default state


A card is a pattern that relies heavily on imagery, therefore, we recommend that you only use cards if you have images associated with your content. A practical use case for this could be your users database or an image library.

Cards are meant for a light comparison of information rather than an exhaustive comparison. If you have exhaustive information to compare, which doesn't contain images, use a table instead.

Cards can have various configurations. We provide a flexible card layout that is fully customizable, so you can create the UI you need. See the example configurations throughout this page to get inspired.

Card interaction

  • A card can have a checkbox, a radio button, or neither of them.
  • You can select a card by using the checkbox or radio button or the image area.
  • The main text in the card can be used for navigation: When used in a Folder card, it navigates to the next level. When used in a File, Image, or User card, it navigates to its detail view. Never use the navigation to view a preview. This is always a secondary action placed inside the action menu. If the link drives the user out of the site, please identify visually that this link will open in a new page.
  • When the card title is hovered a tooltip has to appear showing the entire element title.


By providing a flexible layout, Lexicon gives you a wider range of possible configurations for your card. You can adapt the layout to suite your needs, so it just contain the elements you require.

A card contains the following elements:

  • The image area: The main element in this pattern. It has a 16:9 aspect ratio.
  • Checkbox or radio: This is useful when working together as a visualization type with a management bar.
  • Sticker or User image: This is useful to identify the file type or the owner.
  • An information area Informative text: This contains relevant information, such as the description. Actions menu: This contains actions associated with the card.

The only required element for a card is the image. Everything else can be removed.



card with image default state


card with image hover state, blue border


card with image selected state, blue border and check marked


card with image empty state, no image, gray background grid


7 possible parts of a card

  1. Checkbox
  2. Image
  3. Sticker: file type
  4. Title
  5. Actions button
  6. Detail or short descriptive text
  7. Label: status identifier


Card sections organize content into separate divisions by a certain categorization or typology.

card section


See the dataset template for a practical use case of cards.

Something to improve? Report an issue!