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

Usage

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

Content

Composition

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.

Content

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.

Living room
Located in a quiet street in hip and happening Amsterdam East near the Beukenplein and Oosterpark.

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

Content

Content

Content

Using as action

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.

Content

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.

Content
Content

Properties

Card properties:

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