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

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.

Hide code
function WithCustomDragHandle() {
  const styles = {
    card: css({
      // This lets us change z-index when dragging
      position: 'relative',
    }),
    dragHandle: css({
      alignSelf: 'stretch',
    }),
  };
  const [items, setItems] = React.useState([
    'Tech',
    'News',
    'CMS',
    'Contentful',
  ]);

  function SortableCard({ id }) {
    const { attributes, listeners, setNodeRef, transform, transition, active } =
      useSortable({
        id,
      });
    const zIndex = active && active.id === id ? 1 : 0;
    const style = {
      transform: CSS.Translate.toString(transform),
      transition,
      zIndex,
    };

    return (
      <Card
        className={styles.card}
        dragHandleRender={() => (
          <DragHandle
            as="button"
            className={styles.dragHandle}
            label="Move card"
            {...attributes}
            {...listeners}
          />
        )}
        padding="none"
        withDragHandle
        ref={setNodeRef}
        style={style}
      >
        <Box padding="spacingM">{id}</Box>
      </Card>
    );
  }

  const handleDragEnd = (event) => {
    const { active, over } = event;

    if (active && over && active.id !== over.id) {
      setItems((items) => {
        const oldIndex = items.indexOf(active.id);
        const newIndex = items.indexOf(over.id);

        return arrayMove(items, oldIndex, newIndex);
      });
    }
  };

  return (
    <DndContext onDragEnd={handleDragEnd}>
      <SortableContext items={items} strategy={verticalListSortingStrategy}>
        <Flex flexDirection="column" gap="spacingS">
          {items.map((item) => (
            <SortableCard key={item} id={item} />
          ))}
        </Flex>
      </SortableContext>
    </DndContext>
  );
}
function WithCustomDragHandle() {
  const styles = {
    card: css({
      // This lets us change z-index when dragging
      position: 'relative',
    }),
    dragHandle: css({
      alignSelf: 'stretch',
    }),
  };
  const [items, setItems] = React.useState([
    'Tech',
    'News',
    'CMS',
    'Contentful',
  ]);

  function SortableCard({ id }) {
    const { attributes, listeners, setNodeRef, transform, transition, active } =
      useSortable({
        id,
      });
    const zIndex = active && active.id === id ? 1 : 0;
    const style = {
      transform: CSS.Translate.toString(transform),
      transition,
      zIndex,
    };

    return (
      <Card
        className={styles.card}
        dragHandleRender={() => (
          <DragHandle
            as="button"
            className={styles.dragHandle}
            label="Move card"
            {...attributes}
            {...listeners}
          />
        )}
        padding="none"
        withDragHandle
        ref={setNodeRef}
        style={style}
      >
        <Box padding="spacingM">{id}</Box>
      </Card>
    );
  }

  const handleDragEnd = (event) => {
    const { active, over } = event;

    if (active && over && active.id !== over.id) {
      setItems((items) => {
        const oldIndex = items.indexOf(active.id);
        const newIndex = items.indexOf(over.id);

        return arrayMove(items, oldIndex, newIndex);
      });
    }
  };

  return (
    <DndContext onDragEnd={handleDragEnd}>
      <SortableContext items={items} strategy={verticalListSortingStrategy}>
        <Flex flexDirection="column" gap="spacingS">
          {items.map((item) => (
            <SortableCard key={item} id={item} />
          ))}
        </Flex>
      </SortableContext>
    </DndContext>
  );
}
Open in Playground