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


Cards are just empty containers with basic styling applied to them, and they are perfect for further composition of components.

Cards are frequently used as actionable elements, so you can pass both, href and onClick to it. Actionable cards are visually differentiated from regular cards when hovered or focused to make it clear on the page whether clicking a card will result into any sort of action.

Card supports selected state when used for group selection. For example, it can be used together with Checkbox or Radio to highlight its selected state.


There are cases when you're using Card for a displaying a content which should use the whole area of the card, without any extra padding. In these situations you can turn off padded property of the Card to remove the padding completely. Compare it with the previous example to see the difference.

Removing the padding will let you use elements that are full-width and combining them with the Frame utility to get the padding back for some parts of the content. That might be handy when you're combining full-width media elements with text content.

You can also compose multiple card sections together with Divider component to make it look like a group of cards.

Mobile spacing

It's valuable to avoid double spacing on mobile devices or when Card is used inside another component with padding. To solve the double spacing problem, Card supports bleed property. It will make the Card to get negative margins applied on horizontal sides.

This property is also a responsive one, so you can pass an array of values to use it with different values based on the viewport size.


Card properties:

paddedbooleantruefalseShould have padding?
bleedResponsive(boolean)-falseAdd negative margin on sides to avoid double spacing. Depends on Container padding.
onClick(event) => {}-falseClick handler
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element