Card

View source on GitHub

The Card component is meant to highlight content in grids. It visually shows that items belong together and highlights the items on hover.

Props

Name	Type	Default
`active`	`?boolean`	`false`
`children`	`React.Node`	-
`image`	`React.Node`	-
`onMouseEnter`	`({ event: SyntheticMouseEvent<HTMLDivElement> })`	-
`onMouseLeave`	`({ event: SyntheticMouseEvent<HTMLDivElement> })`	-

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

James Jones

function CardExample() {
  return (
    <Box maxWidth={236} padding={2} column={12}>
      <Card image={<Avatar name="James Jones" src="https://i.ibb.co/2Fc00R3/james.jpg" />}>
        <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"
        />
      </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" />}>
        <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"
        />
      </Card>
    </Box>
  );
}

Edit page on GitHub