Card

Cards are used to group information about subjects and their related actions.
Works with any type of content
Supports custom padding values
Can be used as a navigation link
Can display selected state for a group of elements


Usage

Cards are 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. This will automatically resolve the Card root html tag to a correct one to keep it accessible for screen-readers.

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

Composition

Card has a default 4x padding which can be customised to any other multiplier of the base unit token.

In a same way you can completely remove the padding from the Card and let the content take its full width. Compare it with the previous example to see the difference.

After the padding was removed you can combine full width content with the Frame utility to get the padding back for some parts of the content. That is handy when you're combining media elements with text content.

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

Bleed

On mobile viewports, there is an opportunity to save space by making the Card full width. To avoid layout complexities, Card supports bleed property that will remove side borders and will apply negative margin multiplier you pass to it. Like most other layout properties, bleed property is responsive, so you can easily control how your Card behaves on every viewport size.

For example, second Card here uses x4 bleed on small and medium screen, but renders normally for large and extra large screens.

Properties

NameTypeDefaultRequiredComment
padddingnumber4falseCustom padding value
bleedResponsive(number, boolean)-falseDefines negative margin value
selectedboolean-false
childrenReactNode-false
onClick(event) => {}-falseClick handler
hrefstring-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element
Previous