Card

View source on GitHub

Card is used to highlight content in grids. It visually shows that children elements belong together and can highlight the items on hover.

Props

Component props
Name	Type	Default
`active`	`boolean`	-
	Used to force the "active" hover state visually.
`children`	`React.Node`	-
`image`	`React.Node`	-
	An optional Image to be displayed at the top of the layout.
`onMouseEnter`	`({\| event: SyntheticMouseEvent<HTMLDivElement> \|}) => void`	-
	Optional callback fired when the user mouses over Card.
`onMouseLeave`	`({\| event: SyntheticMouseEvent<HTMLDivElement> \|}) => void`	-
	Optional callback fired when the user away from Card.

Usage guidelines

When to Use

Highlighting content in a grid format.
Displaying related content in a way that is easy to scan, read, and act upon.

When Not to Use

Displaying an unrelated group of information.

Example

Using Card is as easy as it can be, simply wrap your component(s) with it. Ideally all of the children should be clickable and cover 100% of the area

function CardExample() {
  return (
    <Box maxWidth={236} padding={2} column={12}>
      <Card image={<Avatar name="James Jones" src="https://i.ibb.co/2Fc00R3/james.jpg" />}>
        <Flex direction="column" justifyContent="center">
          <Text align="center" weight="bold">
            <Link href="https://pinterest.com">
              <Box paddingX={3} paddingY={2}>
                James Jones
              </Box>
            </Link>
        </Text>
        <Button
          accessibilityLabel="Follow James Jones"
          color="red"
          text="Follow"
        />
        </Flex>
      </Card>
    </Box>
  );
}

function CardExample() {
  return (
    <Box maxWidth={236} padding={2} column={12}>
      <Card image={<Avatar name="James Jones" src="https://i.ibb.co/2Fc00R3/james.jpg" />}>
        <Flex direction="column" justifyContent="center">
          <Text align="center" weight="bold">
            <Link href="https://pinterest.com">
              <Box paddingX={3} paddingY={2}>
                James Jones
              </Box>
            </Link>
        </Text>
        <Button
          accessibilityLabel="Follow James Jones"
          color="red"
          text="Follow"
        />
        </Flex>
      </Card>
    </Box>
  );
}

Edit page on GitHub