Card renders a responsive box-model layout component. Inherits props from Box component.

Import component

import { Card } from 'rimble-ui';

Examples

Different ways to use the Card component

Default card

This is a Card
<Card>This is a Card</Card>
<Card>This is a Card</Card>
Copy code

Different size

This is a Card
<Card bg="black" color="white" maxWidth={"300px"}>
  This is a Card
</Card>
<Card bg="black" color="white" maxWidth={"300px"}>
  This is a Card
</Card>
Copy code

Connect your Wallet:
Install MetaMask
<Card width={"auto"} maxWidth={"420px"} mx={"auto"} px={[3, 3, 4]}>
  <Text
    caps
    fontSize={0}
    fontWeight={4}
    mb={3}
    display={"flex"}
    alignItems={"center"}
  >
    <Icon name={"AccountBalanceWallet"} mr={2} />
    Connect your Wallet:
  </Text>

  <MetaMaskButton.Outline fullWidth width={[1, "auto", "auto"]} px={[3, 4, 4]}>
    Install MetaMask
  </MetaMaskButton.Outline>
</Card>
<Card width={"auto"} maxWidth={"420px"} mx={"auto"} px={[3, 3, 4]}>
  <Text
    caps
    fontSize={0}
    fontWeight={4}
    mb={3}
    display={"flex"}
    alignItems={"center"}
  >
    <Icon name={"AccountBalanceWallet"} mr={2} />
    Connect your Wallet:
  </Text>
  <MetaMaskButton.Outline fullWidth width={[1, "auto", "auto"]} px={[3, 4, 4]}>
    Install MetaMask
  </MetaMaskButton.Outline>
</Card>
Copy code

Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam autem ratione doloribus quidem neque provident eius error dignissimos delectus architecto nemo quos alias sunt voluptate impedit, facilis sequi tempore. Amet!
AcceptCancel
<Card width={"auto"} maxWidth={"420px"} mx={"auto"} px={[3, 3, 4]}>
  <Heading>Heading</Heading>

  <Box>
    <Text mb={4}>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam autem
      ratione doloribus quidem neque provident eius error dignissimos delectus
      architecto nemo quos alias sunt voluptate impedit, facilis sequi tempore.
      Amet!
    </Text>
  </Box>

  <Button width={[1, "auto", "auto"]} mr={3}>
    Accept
  </Button>

  <Button.Outline width={[1, "auto", "auto"]} mt={[2, 0, 0]}>
    Cancel
  </Button.Outline>
</Card>
<Card width={"auto"} maxWidth={"420px"} mx={"auto"} px={[3, 3, 4]}>
  <Heading>Heading</Heading>
  <Box>
    <Text mb={4}>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam autem
      ratione doloribus quidem neque provident eius error dignissimos delectus
      architecto nemo quos alias sunt voluptate impedit, facilis sequi tempore.
      Amet!
    </Text>
  </Box>
  <Button width={[1, "auto", "auto"]} mr={3}>
    Accept
  </Button>
  <Button.Outline width={[1, "auto", "auto"]} mt={[2, 0, 0]}>
    Cancel
  </Button.Outline>
</Card>
Copy code

Card title
Card sub-title
Text ButtonText Button
<Card width={"auto"} maxWidth={"420px"} mx={"auto"} my={5} p={0}>
  <Image
    width={1}
    src="https://source.unsplash.com/random/1280x720"
    alt="random image from unsplash.com"
  />

  <Box px={[3, 3, 4]} py={3}>
    <Heading.h2>Card title</Heading.h2>
    <Heading.h5 color="#666">Card sub-title</Heading.h5>
  </Box>

  <Flex px={[3, 3, 4]} height={3} borderTop={1} borderColor={"#E8E8E8"}>
    <Button.Text p={"0"} mr={[2, 3, 4]} height={"auto"}>
      Text Button
    </Button.Text>

    <Button.Text p={"0"} height={"auto"}>
      Text Button
    </Button.Text>
  </Flex>
</Card>
<Card width={"auto"} maxWidth={"420px"} mx={"auto"} my={5} p={0}>
  <Image
    width={1}
    src="https://source.unsplash.com/random/1280x720"
    alt="random image from unsplash.com"
  />
  <Box px={[3, 3, 4]} py={3}>
    <Heading.h2>Card title</Heading.h2>
    <Heading.h5 color="#666">Card sub-title</Heading.h5>
  </Box>
  <Flex px={[3, 3, 4]} height={3} borderTop={1} borderColor={"#E8E8E8"}>
    <Button.Text p={"0"} mr={[2, 3, 4]} height={"auto"}>
      Text Button
    </Button.Text>
    <Button.Text p={"0"} height={"auto"}>
      Text Button
    </Button.Text>
  </Flex>
</Card>
Copy code

Props

'white'

1

'light-gray'

2

4

'relative'

Styled System Props

Box uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.