Card

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

Table of contents

• How to use Cards
• Component variations
• Code examples
  • With onClick
  • Selectable cards
  • With link and target
• Content recommendations
• Accessibility

Component variations

<Card title="Title">
  <Typography>
    <Paragraph>This is the Card’s content</Paragraph>
  </Typography>
</Card>
<Card title="Title">
  <Typography>
    <Paragraph>This is the Card’s content</Paragraph>
  </Typography>
</Card>
Hide source

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>
  );
}
Hide source

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>
  );
}
Hide source

With link and target

A Card can be used with the pourpose 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="http://f36.contentful.com" target="_blank">
  <Typography>
    <Paragraph>
      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.
    </Paragraph>
  </Typography>
</Card>
<Card href="http://f36.contentful.com" target="_blank">
  <Typography>
    <Paragraph>
      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.
    </Paragraph>
  </Typography>
</Card>
Hide source