Cards

A card is a graphical user interface element that displays information or content in a self-contained and visually appealing way. Cards are often used to display information about products, articles, or other content in a consistent and easily digestible format.

Cards can be designed in different styles, with different sizes, shapes, and colors. They can also include interactive elements, such as buttons or links, to allow the user to take action or learn more about the content.

Cards Guidelines

1. Limit content
2. Differentiate actions
3. Add visual hierarchy
4. Resist excessive borders
5. Limit links. Upfront Action Items
6. One Thought/idea per card
7. Know when to use a list

Card Sizes

Card Elements

Card Type 1

Card Type 2

Card Type 3 Labels & Tags

Card Type 4 Small Card