Card

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.

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

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.

Hide code
function SelectableCardsExample() {
  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)} isSelected={taco}>
          <span role="img" aria-label="taco">
            🌮
          </span>
        </Card>
        <Card onClick={() => setPizza(!pizza)} isSelected={pizza}>
          <span role="img" aria-label="pizza">
            🍕
          </span>
        </Card>
        <Card onClick={() => setBroccoli(!broccoli)} isSelected={broccoli}>
          <span role="img" aria-label="broccoli">
            🥦
          </span>
        </Card>
      </div>
    </div>
  );
}
function SelectableCardsExample() {
  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)} isSelected={taco}>
          <span role="img" aria-label="taco">
            🌮
          </span>
        </Card>
        <Card onClick={() => setPizza(!pizza)} isSelected={pizza}>
          <span role="img" aria-label="pizza">
            🍕
          </span>
        </Card>
        <Card onClick={() => setBroccoli(!broccoli)} isSelected={broccoli}>
          <span role="img" aria-label="broccoli">
            🥦
          </span>
        </Card>
      </div>
    </div>
  );
}
Open in Playground

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. 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.

Hide code
function WithLinkAndTargetExample() {
  return (
    <Card as="a" 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>
  );
}
function WithLinkAndTargetExample() {
  return (
    <Card as="a" 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>
  );
}
Open in Playground