Cards
Our cards provide a flexible and extensible content container with multiple
variants and options. All the Card components compose Box
. The Card
usually
contains a CardHeader
and a CardBody
.
Import#
import Card from "components/Card/Card"import CardBody from "components/Card/CardBody"import CardHeader from "components/Card/CardHeader"
Usage#
function CardExample() {const exampleBg = useColorModeValue("gray.200", "gray.800")const bg = useColorModeValue("gray.50", "gray.700")const textColor = useColorModeValue("gray.700", "white")const emailColor = useColorModeValue("gray.400", "gray.300")return (<><Boxdisplay="flex"flexDirection="column"width="100%"position="relative"minWidth="0px"wordWrap="break-word"backgroundClip="border-box"bg={bg}width="100%"boxShadow="0px 3.5px 5.5px rgba(0, 0, 0, 0.02)"borderRadius="15px"p="1rem"my={{ sm: "24px", xl: "0px" }}><Boxdisplay="flex"width="100%"pt="28px"px="21px"p="12px 5px"mb="12px"><Text fontSize="lg" color={textColor} fontWeight="bold">Profile Information</Text></Box><Box width="100%" px="21px" p="0px 5px"><Flex direction="column"><Text fontSize="md" color="gray.500" fontWeight="400" mb="30px">Hi, I’m Esthera Jackson, Decisions: If you can’t decide, theanswer is no. If two equally difficult paths, choose the one morepainful in the short term (pain avoidance is creating an illusionof equality).</Text><Flex alignItems="center" mb="18px"><Text fontSize="md" color={textColor} fontWeight="bold" me="10px">Full Name:{" "}</Text><Text fontSize="md" color="gray.500" fontWeight="400">Esthera Jackson</Text></Flex><Flex alignItems="center" mb="18px"><Text fontSize="md" color={textColor} fontWeight="bold" me="10px">Mobile:{" "}</Text><Text fontSize="md" color="gray.500" fontWeight="400">(44) 123 1234 123</Text></Flex><Flex alignItems="center" mb="18px"><Text fontSize="md" color={textColor} fontWeight="bold" me="10px">Email:{" "}</Text><Text fontSize="md" color="gray.500" fontWeight="400">esthera@simmmple.com</Text></Flex><Flex alignItems="center" mb="18px"><Text fontSize="md" color={textColor} fontWeight="bold" me="10px">Location:{" "}</Text><Text fontSize="md" color="gray.500" fontWeight="400">United States</Text></Flex><Flex alignItems="center" mb="18px"><Text fontSize="md" color={textColor} fontWeight="bold" me="10px">Social Media:{" "}</Text><Flex><Linkhref="#"color="teal.300"fontSize="lg"me="10px"_hover={{ color: "teal.300" }}><PhoneIcon /></Link><Linkhref="#"color="teal.300"fontSize="lg"me="10px"_hover={{ color: "teal.300" }}><PhoneIcon /></Link><Linkhref="#"color="teal.300"fontSize="lg"me="10px"_hover={{ color: "teal.300" }}><PhoneIcon /></Link></Flex></Flex></Flex></Box></Box></>)}
<Card p="1rem" my={{ sm: "24px", xl: "0px" }}><CardHeader p="12px 5px" mb="12px"><Text fontSize="lg" color={textColor} fontWeight="bold">Profile Information</Text></CardHeader><CardBody p="0px 5px"><Flex direction="column"><Text fontSize="md" color="gray.500" fontWeight="400" mb="30px">Hi, I’m Esthera Jackson, Decisions: If you can’t decide, the answer isno. If two equally difficult paths, choose the one more painful in theshort term (pain avoidance is creating an illusion of equality).</Text><Flex alignItems="center" mb="18px"><Text fontSize="md" color={textColor} fontWeight="bold" me="10px">Full Name:{" "}</Text><Text fontSize="md" color="gray.500" fontWeight="400">Esthera Jackson</Text></Flex><Flex alignItems="center" mb="18px"><Text fontSize="md" color={textColor} fontWeight="bold" me="10px">Mobile:{" "}</Text><Text fontSize="md" color="gray.500" fontWeight="400">(44) 123 1234 123</Text></Flex><Flex alignItems="center" mb="18px"><Text fontSize="md" color={textColor} fontWeight="bold" me="10px">Email:{" "}</Text><Text fontSize="md" color="gray.500" fontWeight="400">esthera@simmmple.com</Text></Flex><Flex alignItems="center" mb="18px"><Text fontSize="md" color={textColor} fontWeight="bold" me="10px">Location:{" "}</Text><Text fontSize="md" color="gray.500" fontWeight="400">United States</Text></Flex><Flex alignItems="center" mb="18px"><Text fontSize="md" color={textColor} fontWeight="bold" me="10px">Social Media:{" "}</Text><Flex><Linkhref="#"color="teal.300"fontSize="lg"me="10px"_hover={{ color: "teal.300" }}><Icon as={FaFacebook} /></Link><Linkhref="#"color="teal.300"fontSize="lg"me="10px"_hover={{ color: "teal.300" }}><Icon as={FaInstagram} /></Link><Linkhref="#"color="teal.300"fontSize="lg"me="10px"_hover={{ color: "teal.300" }}><Icon as={FaTwitter} /></Link></Flex></Flex></Flex></CardBody></Card>
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web