--- id: card title: Card --- # Card Cards can be used to divide and organize interface content for better understandability and readability. When used correctly, Cards can help users to scan through vast amounts of information quicker. ## How to use



### With gray border color



### With dark border color



### 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.



### With grey top border



### With dark top border



### With divider



### With actions



### With title link

Cards can be used without an action button, but with a clickable title.



### With clickable content

You can expand the clickable area of the link to fill Card's content.



### With button or link

Cards also provides styles for actionable elements such as Buttons or Links.



### With a group of actions



## API

See below for a complete reference to all of the props  available to the components mentioned here.