Cards

Cards are a visual representation of data

Usage

Cards is a pattern that is heavy on image usage, therefore we recommend to use it only if you have images asociated to your content. A good example of this could be your users database or an image library.

Cards are not meant to compare information in an exhautive way but a light way. In case you need exhaustive comparison and not based on image comparison, you must use a table.

Cards in Lexicon are open to many configurations. We provide a flexible card layout for you to configure it as you want. Later on this page we provide a series of examples we use in our systems for you to get inspired.

Layout

By providing a flexible layout, Lexicon opens you a wider range of possible configurations for your card. Every element can be used or deleted adapting it to your specific needs in each use case.

As you can see in the following image, a card is shaped by:

• Image: main element in this pattern.
• Checkbox or radio button: useful when working together as a visualization type with a management bar.
• Sticker or User image: Useful to identify the file type or the owner.
• Information area
  • Text lines of different importance: relevant information.
  • Actions menu: actions associated to the card

Among these elements, the only one that can't be removed for the pattern meaning is the image.

It is important to highlight that images can have different size configuration in relation to aspect ratio and cropping. Please, check images section in Quartz to get more information about it.

Attributes

Examples of use

Variations

Horizontal card

This card variation is meant to have horizontal representations of information. This card has the same amount of elements as the previous explained. The main purpose of this card is to represent folders, therefore we allow to remove the image in this card type.