Cards

A card is a single squared container that holds different media (text, image, video or audio) contextually related. Each card is considered a conceptual unit, and a screen can be populated by many of them.

Use Cases

When different information units are needed to be shown on-screen, clearly distinguishing one from another either grouped or ungrouped.

Type No Picture With Picture With Picture & CTA User Card

Type

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna lorem aliqua. Ut enim ad minim veni, quis nostrud exercitation. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna lorem.

Expand Content

HTML

Do's & Dont's

Select your layout accordingly

When using cards, there are many different options depending on the content they will have.

Always choose the one that fits better with the general content, in order to keep the same layout for all the cards on the section needed.

Tailor the content as the card requires to

A card is not only a container to show media or text. It is also a way to lead users to a different page with detailed information on the matter previously shown.

Tailor the content on your card to define what must be shown and what can be hidden, in order to allow users go through the content with ease. Keep images on good quality and CTAs concise and simple.

Avoid multiple CTAs and complex flows

Even considering that a card can lead to another page, it is advised to avoid complex navigation flows triggered by a card. Keep navigation simple, as the card should lead only to a different page with detailed information and, if including buttons, these must trigger only actions and don't contain more than one CTA.

Cards

Use Cases

Card title

Card title

Card title

Card title

Do's & Dont's

Alternative and Related components

Tables

Carousels

Side Columns & Offcanvas