Card

Cards are used to group information about subjects and their related actions.

• Supports any type of content: Cards are one of the most used components in the product, so they have to be flexible enough to support any other components placed in them.
• Information structure: No matter how flexible cards are, it’s important for cards to have a specific structure for its elements for product consistency.
• Supports media sections: One of the most popular scenarios for using cards is mixing them with media content. The most popular options are having a full-width area on top of the content or full-height area at one of the card’s sides.
• Supplementary actions: Cards can be used with actions usually placed at the bottom of the card, or the card itself can be tappable and represent an action.
• Responsiveness: On mobile viewports cards are usually full-width in order to save space for the content.