Card
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.
Cards must not be used as interactive elements themselves. This means that the whole card should not be clickable. Elements inside the Card can still be interactable such as Buttons or Links.
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.
Default Card
Card with border
You can set the color of the Card's border. You can choose between dark and grey color
respectively.
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 dark and grey color
respectively. By default the top border color is grey
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.
Cards also provides styles for actionable elements such as Buttons or Links.