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.
- 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.
Image cards are used in image/document galleries.
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.
Aspect ratio might be used when the content to represent in the card is a document. The image can expand to fill the area.
- Sticker: file type
- Actions button
- Detail or short descriptive text
- Label: status identifier
User cards represent users. The user can be represented by their user image or up to two initials extracted from their user name or name + surname.
File cards represent files other than images.
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.
Card sections organize content into separate divisions by a certain categorization or typology.
See the dataset template for a practical use case of cards.