Forma 36 - Card

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

Component variations


<Card title="Title">
  <Text>This is the Card’s content</Text>
</Card><Card title="Title">
  <Text>This is the Card’s content</Text>
</Card>

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.


function CardExample() {
  const [show, setShow] = React.useState(false);
  return (
    <React.Fragment>
      <Card onClick={() => setShow(!show)}>
        Click on this card
        <br />
        {show && (
          <span role="img" aria-label="sparkles">
            ✨✨✨
          </span>
        )}
      </Card>
    </React.Fragment>
  );
}function CardExample() {
  const [show, setShow] = React.useState(false);
  return (
    <React.Fragment>
      <Card onClick={() => setShow(!show)}>
        Click on this card
        <br />
        {show && (
          <span role="img" aria-label="sparkles">
            ✨✨✨
          </span>
        )}
      </Card>
    </React.Fragment>
  );
}

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.


function CardsExample() {
  const [taco, setTaco] = React.useState(false);
  const [pizza, setPizza] = React.useState(false);
  const [broccoli, setBroccoli] = React.useState(false);

  return (
    <div>
      <Heading>What is your favorite food?</Heading>
      <div>
        <Card onClick={() => setTaco(!taco)} selected={taco}>
          <span role="img" aria-label="taco">
            🌮
          </span>
        </Card>
        <Card onClick={() => setPizza(!pizza)} selected={pizza}>
          <span role="img" aria-label="pizza">
            🍕
          </span>
        </Card>
        <Card onClick={() => setBroccoli(!broccoli)} selected={broccoli}>
          <span role="img" aria-label="broccoli">
            🥦
          </span>
        </Card>
      </div>
    </div>
  );
}function CardsExample() {
  const [taco, setTaco] = React.useState(false);
  const [pizza, setPizza] = React.useState(false);
  const [broccoli, setBroccoli] = React.useState(false);

  return (
    <div>
      <Heading>What is your favorite food?</Heading>
      <div>
        <Card onClick={() => setTaco(!taco)} selected={taco}>
          <span role="img" aria-label="taco">
            🌮
          </span>
        </Card>
        <Card onClick={() => setPizza(!pizza)} selected={pizza}>
          <span role="img" aria-label="pizza">
            🍕
          </span>
        </Card>
        <Card onClick={() => setBroccoli(!broccoli)} selected={broccoli}>
          <span role="img" aria-label="broccoli">
            🥦
          </span>
        </Card>
      </div>
    </div>
  );
}

With `link` and `target`

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.


<Card href="https://f36.contentful.com" target="_blank">
  <Text>
    Forma 36 is an open-source design system by Contentful created with the
    intent to reduce the overhead of creating UI by providing tools and guidance
    for digital teams building and extending Contentful products.
  </Text>
</Card><Card href="https://f36.contentful.com" target="_blank">
  <Text>
    Forma 36 is an open-source design system by Contentful created with the
    intent to reduce the overhead of creating UI by providing tools and guidance
    for digital teams building and extending Contentful products.
  </Text>
</Card>

Props

Name
actions
Description
An array of Menu elements used to render an actions menu
ReactNodeArray
Name
actionsButtonProps
Description
Props to pass to the action menu button
Partial<ButtonProps<"button">>
Name
ariaLabel
Description
If the card is selectable and has no title, it will need a aria-label to help screen readers identify it
string
Name
as
Description
Handle tag for Card component
HTML Tag or React Component (e.g. div, span, etc)
Name
badge
Description
Badge component to show in Card header
ReactElement<any, string | JSXElementConstructor<any>>
Name
children
Description
Child nodes to be rendered in the component
ReactNode
Name
className
Description
CSS class to be appended to the root element
string
Name
dragHandleRender
Description
Custom drag handle renderer. Useful, when integrating cards with drag-n-drop libraries
(props: { isDragging?: boolean; drag: ReactElement<any, string | JSXElementConstructor<any>>; }) => ReactElement<any, string | JSXElementConstructor<any>>
Name
href
Description
Passing href into the Card. You need to also add property as="a" to make it rendered as <a />
string
Name
icon
Description
Icon to show in the Card header
ReactElement<any, string | JSXElementConstructor<any>>
Name
isDragging
Description
Applies dragging styles to the card and drag handle
false
true
Name
isHovered
Description
Applies hover styles to the card
false
true
Name
isLoading
Description
Loading state for the component - when true will display loading feedback to the user
false
true
Name
isSelected
Description
Applies selected styles to the element
false
true
Name
margin
Description
sets margin to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
marginBottom
Description
sets margin-bottom to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
marginLeft
Description
sets margin-left to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
marginRight
Description
sets margin-right to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
marginTop
Description
sets margin-top to one of the corresponding spacing tokens
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
Name
onClick
Description
Click event handler
MouseEventHandler<HTMLElement>
Name
padding
Description
Padding size to apply to the component
"none"
"default"
"large"
Name
testId
Description
A [data-test-id] attribute used for testing purposes
string
Name
title
Description
The title of the entry. It will also be used as aria-label
string

Component variations

Code examples

With onClick

Selectable cards

With link and target

Props

actions

actionsButtonProps

ariaLabel

as

badge

children

className

dragHandleRender

href

icon

isDragging

isHovered

isLoading

isSelected

margin

marginBottom

marginLeft

marginRight

marginTop

onClick

padding

testId

title

Help improve this page

With `onClick`

With `link` and `target`