Card

Group related content for easier scannability in a styled, often interactive box.

Import

import { Card } from '@contentful/f36-components';
// or
import { Card } from '@contentful/f36-card';

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 isSelected 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. By default Card is rendered as article html tag, in order to render it as a link, you should pass as="a" to Card component.

With a custom drag handle

When using the withDragHandle prop on the Card, you can also pass a custom drag handle render function. This is useful for more advanced use cases such as supporting keyboard navigation, where you would want to handle key events on the drag handle component. When using a custom drag handle, you should pass padding="none" to the Card to make sure the drag handle does not render inside the Card's content.

Props (API reference)

Open in Storybook

Name

Type

Default

actions
ReactNodeArray

An array of Menu elements used to render an actions menu

actionsButtonProps
Partial<ButtonProps<"button">>

Props to pass to the action menu button

ariaLabel
string

If the card is selectable and has no title, it will need a aria-label to help screen readers identify it

as
HTML Tag or React Component (e.g. div, span, etc)

Handle tag for Card component

badge
string
number
false
true
{}
ReactElement<any, string | JSXElementConstructor<any>>
ReactNodeArray
ReactPortal

Badge component to show in Card header

children
ReactNode

Child nodes to be rendered in the component

className
string

CSS class to be appended to the root element

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

href
string

Passing href into the Card. You need to also add property as="a" to make it rendered as <a />

icon
ReactElement<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

margin
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin to one of the corresponding spacing tokens

marginBottom
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-bottom to one of the corresponding spacing tokens

marginLeft
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-left to one of the corresponding spacing tokens

marginRight
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-right to one of the corresponding spacing tokens

marginTop
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-top to one of the corresponding spacing tokens

onClick
MouseEventHandler<HTMLElement>

Click event handler

padding
"none"
"default"
"large"

Padding size to apply to the component

default
testId
string

A [data-test-id] attribute used for testing purposes

title
string

The title of the entry. It will also be used as aria-label

withDragHandle
any

Render the component with a drag handle