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

Cards Variations

Sign In
View in FigmaView in Clay

Card variations are designed to represent different types of information.

Image card

Image cards are used in image/document galleries.

card with image default state

Image with different ratios

Images can vary in size. So no visual information is lost in the card, Lexicon maintains the original images aspect ratio within the image area's container.

Card Image Aspect Ratio 1

Card Image Aspect Ratio 2

Card Image Aspect Ratio 3

Aspect ratio might be used when the content to represent in the card is a document. The image can expand to fill the area.

User card

User cards represent users. The user is represented by its profile image or a default user icon.

User card without image but initials

User card with image

File card

File cards represent files other than images.

file card is identified with file icon type as center image

Folder card

Folder cards display horizontal representations of information. They have the same amount of elements as the other cards previously explained on this page. The main purpose of this card is to represent folders, therefore the image is removed in this card type. In this case, only the checkbox is used to select.

folder card, similar to a stripe card

Blog card

Blog cards uses images keeping the vertical aspect ratio, wrapping all the area, giving a visual clue to identify blog entries.

Blog cards uses all the space available for the cover image

Product card

Product cards use a different arrangement of elements, using transparent images on colored backgrounds.

A product card showing a rim

Product cards encourage users to add the item to the shopping cart using a button as a prominent call to action. Users can also compare with other items or add them to a wish list.

A product card showing a rim with compare and add to list actions

Something to improve? Report an issue!