Cards can be used to divide and organise interface content for better understandability and readability. When used correctly, Cards can help users to scan through vast amounts of information quicker.
When to use this component
Using Cards in a page can be helpful for users because:
- It can drastically improve service's understandability and readability.
- Cards work very well for listing heterogenous content such as news items, blog posts, or upcoming events.
- Cards can also be used to emphasize important content such as site CTA (Call To Action).
When not to use this component
Use Cards sparingly. While they can drastically improve service's understandability and readability, overusing them may result in confusing and complex user interfaces.
How it works
Currently, Card is empty base by default. We recommend using Cards without border style.
Card border increases the contrast to its background in case where the user research done for your service supports this design choice.
You should avoid overusing the bordered Card. It can become overwhelming for users and lose its significance.
Card with border
You can set the color of the Card's border. You can choose between
Card with gray border color
Card with dark border color
Card with top border
You can set the color of the Card's top border. You can choose between
respectively. By default the top border color is
Card with grey top border
Card with dark top border
Card with divider
Card with actions
Card with title link
Cards can be used without an action button, but with a clickable title.
Card with clickable content
You can expand the clickable area of the link to fill Card's content.