This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

Card

A Card is a component to group information or content of a particular subject in one place.

Table of contents

Component variations

Code examples

Here you will find the most common ways of using the Card component.

With onClick

It’s possible to call an action when the user clicks on the Card. To do that, you only need to pass a function to the onClick prop.

Selectable cards

Sometimes you will need to use the Card as an selectable element in the UI. To achieve that behaviour, you should use a combination of the onClick and selected props. The former controlling the latter.

A Card can be used with the purpose to navigate a user to an external page. To do that a user must pass a value to the href prop. Optionally, the user can pass a target prop to control how the link should be open.

Props

NameRequiredDefaultTypeDescription
actionsReactNodeArrayAn array of Menu elements used to render an actions menu
actionsButtonPropsPartial<ButtonProps<"button">>Props to pass to the action menu button
ariaLabelstringIf the card is selectable and has no title, it will need a aria-label to help screen readers identify it
badgeReactElement<any, string | JSXElementConstructor<any>>Badge component to show in Card header
dragHandleRender(props: { isDragging?: boolean; drag: ReactElement<any, string | JSXElementConstructor<any>>; }) => ReactElement<any, string | JSXElementConstructor<any>>Custom drag handle renderer. Useful, when integrating cards with drag-n-drop libraries
hrefstringPassing href into the Card. You need to also add property as="a" to make it rendered as <a />
iconReactElement<any, string | JSXElementConstructor<any>>Icon to show in the Card header
isDragging
false
true
Applies dragging styles to the card and drag handle
isHovered
false
true
Applies hover styles to the card
isLoading
false
true
Loading state for the component - when true will display loading feedback to the user
isSelected
false
true
Applies selected styles to the element
marginSpacingsets margin to one of the corresponding spacing tokens
marginBottomSpacingsets margin-bottom to one of the corresponding spacing tokens
marginLeftSpacingsets margin-left to one of the corresponding spacing tokens
marginRightSpacingsets margin-right to one of the corresponding spacing tokens
marginTopSpacingsets margin-top to one of the corresponding spacing tokens
onClickMouseEventHandler<HTMLElement>Click event handler
paddingdefault
"none"
"default"
"large"
Padding size to apply to the component
titlestringThe title of the entry. It will also be used as aria-label
withDragHandle
false
true
Render the component with a drag handle
asHTML Tag or React Component, e.g. div, span, etc.Handle tag for Card component
childrenReactNodeChild nodes to be rendered in the component
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes