Cards
<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Boxmx="auto"px={8}py={4}rounded="lg"shadow="lg"bg="white"_dark={{bg: "gray.800",}}maxW="2xl"><Flex justifyContent="space-between" alignItems="center"><chakra.spanfontSize="sm"color="gray.600"_dark={{color: "gray.400",}}>Mar 10, 2019</chakra.span><Linkpx={3}py={1}bg="gray.600"color="gray.100"fontSize="sm"fontWeight="700"rounded="md"_hover={{bg: "gray.500",}}>Design</Link></Flex><Box mt={2}><LinkfontSize="2xl"color="gray.700"_dark={{color: "white",}}fontWeight="700"_hover={{color: "gray.600",_dark: {color: "gray.200",},textDecor: "underline",}}>Accessibility tools for designers and developers</Link><chakra.pmt={2}color="gray.600"_dark={{color: "gray.300",}}>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporaexpedita dicta totam aspernatur doloremque. Excepturi iste iusto eosenim reprehenderit nisi, accusamus delectus nihil quis facere in modiratione libero!</chakra.p></Box><Flex justifyContent="space-between" alignItems="center" mt={4}><Linkcolor="brand.600"_dark={{color: "brand.400",}}_hover={{textDecor: "underline",}}>Read more</Link><Flex alignItems="center"><Imagemx={4}w={10}h={10}rounded="full"fit="cover"display={{base: "none",sm: "block",}}src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80"alt="avatar"/><Linkcolor="gray.700"_dark={{color: "gray.200",}}fontWeight="700"cursor="pointer">Khatab wedaa</Link></Flex></Flex></Box></Flex>;
<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Boxw="full"maxW="sm"mx="auto"px={4}py={3}bg="white"_dark={{bg: "gray.800",}}shadow="md"rounded="md"><Flex justifyContent="space-between" alignItems="center"><chakra.spanfontSize="sm"color="gray.800"_dark={{color: "gray.400",}}>Courses and MOOCs</chakra.span><chakra.spancolor="brand.800"_dark={{color: "brand.900",}}px={3}py={1}rounded="full"textTransform="uppercase"fontSize="xs">psychology</chakra.span></Flex><Box><chakra.h1fontSize="lg"fontWeight="bold"mt={2}color="gray.800"_dark={{color: "white",}}>AP® Psychology - Course 5: Health and Behavior</chakra.h1><chakra.pfontSize="sm"mt={2}color="gray.600"_dark={{color: "gray.300",}}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendisimilique exercitationem optio libero vitae accusamus cupiditate laborumeos.</chakra.p></Box><Box><FlexalignItems="center"mt={2}color="gray.700"_dark={{color: "gray.200",}}><span>Visit on:</span><Linkmx={2}cursor="pointer"textDecor="underline"color="brand.600"_dark={{color: "brand.400",}}>edx.org</Link><span>or</span><Linkmx={2}cursor="pointer"textDecor="underline"color="brand.600"_dark={{color: "brand.400",}}wordBreak="break-word">classcentral.com</Link></Flex><Flex alignItems="center" justifyContent="center" mt={4}><Linkmr={2}color="gray.800"_dark={{color: "gray.400",}}_hover={{color: "gray.700",_dark: {color: "gray.300",},}}cursor="pointer"><AiOutlineTwitter /></Link><Linkmr={2}color="gray.800"_dark={{color: "gray.400",}}_hover={{color: "gray.700",_dark: {color: "gray.300",},}}cursor="pointer"><AiOutlineLink /></Link></Flex></Box></Box></Flex>;
<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Boxmx="auto"rounded="lg"shadow="md"bg="white"_dark={{bg: "gray.800",}}maxW="2xl"><ImageroundedTop="lg"w="full"h={64}fit="cover"src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"alt="Article"/><Box p={6}><Box><chakra.spanfontSize="xs"textTransform="uppercase"color="brand.600"_dark={{color: "brand.400",}}>Product</chakra.span><Linkdisplay="block"color="gray.800"_dark={{color: "white",}}fontWeight="bold"fontSize="2xl"mt={2}_hover={{color: "gray.600",textDecor: "underline",}}>I Built A Successful Blog In One Year</Link><chakra.pmt={2}fontSize="sm"color="gray.600"_dark={{color: "gray.400",}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestieparturient et sem ipsum volutpat vel. Natoque sem et aliquam maurisegestas quam volutpat viverra. In pretium nec senectus erat. Etmalesuada lobortis.</chakra.p></Box><Box mt={4}><Flex alignItems="center"><Flex alignItems="center"><Imageh={10}fit="cover"rounded="full"src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60"alt="Avatar"/><Linkmx={2}fontWeight="bold"color="gray.700"_dark={{color: "gray.200",}}>Jone Doe</Link></Flex><chakra.spanmx={1}fontSize="sm"color="gray.600"_dark={{color: "gray.300",}}>21 SEP 2015</chakra.span></Flex></Box></Box></Box></Flex>;
<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Boxbg="white"_dark={{bg: "gray.800",}}mx={{lg: 8,}}display={{lg: "flex",}}maxW={{lg: "5xl",}}shadow={{lg: "lg",}}rounded={{lg: "lg",}}><Boxw={{lg: "50%",}}><Boxh={{base: 64,lg: "full",}}rounded={{lg: "lg",}}bgSize="cover"style={{backgroundImage:"url('https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80')",}}></Box></Box><Boxpy={12}px={6}maxW={{base: "xl",lg: "5xl",}}w={{lg: "50%",}}><chakra.h2fontSize={{base: "2xl",md: "3xl",}}color="gray.800"_dark={{color: "white",}}fontWeight="bold">Build Your New{" "}<chakra.spancolor="brand.600"_dark={{color: "brand.400",}}>Idea</chakra.span></chakra.h2><chakra.pmt={4}color="gray.600"_dark={{color: "gray.400",}}>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modireprehenderit vitae exercitationem aliquid dolores ullam temporibus enimexpedita aperiam mollitia iure consectetur dicta tenetur, porroconsequuntur saepe accusantium consequatur.</chakra.p><Box mt={8}><Linkbg="gray.900"color="gray.100"px={5}py={3}fontWeight="semibold"rounded="lg"_hover={{bg: "gray.800",}}>Start Now</Link></Box></Box></Box></Flex>;
<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><BoxmaxW="xs"mx="auto"bg="white"_dark={{bg: "gray.800",}}shadow="lg"rounded="lg"><Box px={4} py={2}><chakra.h1color="gray.800"_dark={{color: "white",}}fontWeight="bold"fontSize="3xl"textTransform="uppercase">NIKE AIR</chakra.h1><chakra.pmt={1}fontSize="sm"color="gray.600"_dark={{color: "gray.400",}}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quosquidem sequi illum facere recusandae voluptatibus</chakra.p></Box><Imageh={48}w="full"fit="cover"mt={2}src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80"alt="NIKE AIR"/><FlexalignItems="center"justifyContent="space-between"px={4}py={2}bg="gray.900"roundedBottom="lg"><chakra.h1 color="white" fontWeight="bold" fontSize="lg">$129</chakra.h1><chakra.buttonpx={2}py={1}bg="white"fontSize="xs"color="gray.900"fontWeight="bold"rounded="lg"textTransform="uppercase"_hover={{bg: "gray.200",}}_focus={{bg: "gray.400",}}>Add to cart</chakra.button></Flex></Box></Flex>;
<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><FlexmaxW="md"mx="auto"bg="white"_dark={{bg: "gray.800",}}shadow="lg"rounded="lg"overflow="hidden"><Boxw={1 / 3}bgSize="cover"style={{backgroundImage:"url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')",}}></Box><Boxw={2 / 3}p={{base: 4,md: 4,}}><chakra.h1fontSize="2xl"fontWeight="bold"color="gray.800"_dark={{color: "white",}}>Backpack</chakra.h1><chakra.pmt={2}fontSize="sm"color="gray.600"_dark={{color: "gray.400",}}>Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</chakra.p><HStack spacing={1} display="flex" alignItems="center" mt={2}><StarIconcolor="gray.700"_dark={{color: "gray.300",}}/><StarIconcolor="gray.700"_dark={{color: "gray.300",}}/><StarIconcolor="gray.700"_dark={{color: "gray.300",}}/><StarIcon color="gray.500" /><StarIcon color="gray.500" /></HStack><Flex mt={3} alignItems="center" justifyContent="space-between"><chakra.h1 color="white" fontWeight="bold" fontSize="lg">$220</chakra.h1><chakra.buttonpx={2}py={1}bg="white"fontSize="xs"color="gray.900"fontWeight="bold"rounded="lg"textTransform="uppercase"_hover={{bg: "gray.200",}}_focus={{bg: "gray.400",}}>Add to cart</chakra.button></Flex></Box></Flex></Flex>;
() => {const property = {imageUrl: "https://bit.ly/2Z4KKcF",imageAlt: "Rear view of modern home with pool",beds: 3,baths: 2,title: "Modern home in city center in the heart of historic Los Angeles",formattedPrice: "$1,900.00",reviewCount: 34,rating: 4,};return (<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Boxbg="white"_dark={{bg: "gray.800",}}maxW="sm"borderWidth="1px"rounded="lg"shadow="lg"><Imagesrc={property.imageUrl}alt={property.imageAlt}roundedTop="lg"/><Box p="6"><Box display="flex" alignItems="baseline"><Badge rounded="full" px="2" colorScheme="teal">New</Badge><Boxcolor="gray.500"fontWeight="semibold"letterSpacing="wide"fontSize="xs"textTransform="uppercase"ml="2">{property.beds} beds • {property.baths} baths</Box></Box><Textmt="1"fontWeight="semibold"as="h4"lineHeight="tight"noOfLines={1}>{property.title}</Text><Box>{property.formattedPrice}<Box as="span" color="gray.600" fontSize="sm">/ wk</Box></Box><Box display="flex" mt="2" alignItems="center">{Array(5).fill("").map((_, i) => (<StarIconkey={i}color={i < property.rating ? "teal.500" : "gray.300"}/>))}<Box as="span" ml="2" color="gray.600" fontSize="sm">{property.reviewCount} reviews</Box></Box></Box></Box></Flex>);};
<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Flexdirection="column"justifyContent="center"alignItems="center"w="sm"mx="auto"><Boxbg="gray.300"h={64}w="full"rounded="lg"shadow="md"bgSize="cover"bgPos="center"style={{backgroundImage:"url(https://images.unsplash.com/photo-1521903062400-b80f2cb8cb9d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80)",}}></Box><Boxw={{base: 56,md: 64,}}bg="white"_dark={{bg: "gray.800",}}mt={-10}shadow="lg"rounded="lg"overflow="hidden"><chakra.h3py={2}textAlign="center"fontWeight="bold"textTransform="uppercase"color="gray.800"_dark={{color: "white",}}letterSpacing={1}>Nike Revolt</chakra.h3><FlexalignItems="center"justifyContent="space-between"py={2}px={3}bg="gray.200"_dark={{bg: "gray.700",}}><chakra.spanfontWeight="bold"color="gray.800"_dark={{color: "gray.200",}}>$129</chakra.span><chakra.buttonbg="gray.800"fontSize="xs"fontWeight="bold"color="white"px={2}py={1}rounded="lg"textTransform="uppercase"_hover={{bg: "gray.700",_dark: {bg: "gray.600",},}}_focus={{bg: "gray.700",_dark: {bg: "gray.600",},outline: "none",}}>Add to cart</chakra.button></Flex></Box></Flex></Flex>;
<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Boxw="md"mx="auto"py={4}px={8}bg="white"_dark={{bg: "gray.800",}}shadow="lg"rounded="lg"><FlexjustifyContent={{base: "center",md: "end",}}mt={-16}><Imagew={20}h={20}fit="cover"rounded="full"borderStyle="solid"borderWidth={2}color="brand.500"_dark={{color: "brand.400",}}alt="Testimonial avatar"src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80"/></Flex><chakra.h2color="gray.800"_dark={{color: "white",}}fontSize={{base: "2xl",md: "3xl",}}mt={{base: 2,md: 0,}}fontWeight="bold">Design Tools</chakra.h2><chakra.pmt={2}color="gray.600"_dark={{color: "gray.200",}}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae doloresdeserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodihic, suscipit in a veritatis pariatur minus consequuntur!</chakra.p><Flex justifyContent="end" mt={4}><LinkfontSize="xl"color="brand.500"_dark={{color: "brand.300",}}>John Doe</Link></Flex></Box></Flex>;
<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Boxw="xs"bg="white"_dark={{bg: "gray.800",}}shadow="lg"rounded="lg"overflow="hidden"mx="auto"><Imagew="full"h={56}fit="cover"src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"alt="avatar"/><Box py={5} textAlign="center"><Linkdisplay="block"fontSize="2xl"color="gray.800"_dark={{color: "white",}}fontWeight="bold">John Doe</Link><chakra.spanfontSize="sm"color="gray.700"_dark={{color: "gray.200",}}>Software Engineer</chakra.span></Box></Box></Flex>;
<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Flexshadow="lg"rounded="lg"bg="#edf3f8"_dark={{bg: "gray.800",}}mb={8}direction="column"alignItems="center"justifyContent="center"><Boxbg="#edf3f8"_dark={{bg: "#3e3e3e",}}style={{backgroundImage:"url(https://images.unsplash.com/photo-1666795599746-0f62dfa29a07?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80)",backgroundSize: "cover",backgroundPosition: "center",backgroundRepeat: "no-repeat",}}height="100%"width="100%"borderRadius="lg"p={8}display="flex"alignItems="left"><Imagesrc="https://images.unsplash.com/photo-1623930154261-37f8b293c059?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"alt="Profile Picture"borderRadius="full"boxSize="150px"shadow="lg"border="5px solid"mb={-20}borderColor="gray.800"_dark={{borderColor: "gray.200",}}/></Box><BoxgridColumn="span 8"p={8}width="full"height="full"borderRadius="lg"textAlign="left"mt={10}><TextfontSize="4xl"fontWeight="bold"color="gray.800"_dark={{color: "white",}}>Christian Buehner</Text><HStackspacing={3}color="gray.800"_dark={{color: "gray.200",}}><FaSuitcase size={24} /><TextfontSize="2xl"fontWeight="bold"color="gray.800"_dark={{color: "gray.200",}}>Photographer</Text></HStack><HStackspacing={3}color="gray.700"_dark={{color: "gray.200",}}><FaMapPin size={20} /><Text fontSize="lg">Germany</Text></HStack><HStackspacing={3}color="gray.700"_dark={{color: "gray.200",}}><FaEnvelope size={20} /><Text fontSize="lg">chris@buehner.com</Text></HStack></Box></Flex></Flex>;
<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Boxw="sm"mx="auto"bg="white"_dark={{bg: "gray.800",}}shadow="lg"rounded="lg"overflow="hidden"><Imagew="full"h={56}fit="cover"objectPosition="center"src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"alt="avatar"/><Flex alignItems="center" px={6} py={3} bg="gray.900"><Icon as={MdHeadset} h={6} w={6} color="white" /><chakra.h1 mx={3} color="white" fontWeight="bold" fontSize="lg">Focusing</chakra.h1></Flex><Box py={4} px={6}><chakra.h1fontSize="xl"fontWeight="bold"color="gray.800"_dark={{color: "white",}}>Patterson johnson</chakra.h1><chakra.ppy={2}color="gray.700"_dark={{color: "gray.400",}}>Full Stack maker & UI / UX Designer , love hip hop music Author ofBuilding UI.</chakra.p><FlexalignItems="center"mt={4}color="gray.700"_dark={{color: "gray.200",}}><Icon as={BsFillBriefcaseFill} h={6} w={6} mr={2} /><chakra.h1 px={2} fontSize="sm">Choc UI</chakra.h1></Flex><FlexalignItems="center"mt={4}color="gray.700"_dark={{color: "gray.200",}}><Icon as={MdLocationOn} h={6} w={6} mr={2} /><chakra.h1 px={2} fontSize="sm">California</chakra.h1></Flex><FlexalignItems="center"mt={4}color="gray.700"_dark={{color: "gray.200",}}><Icon as={MdEmail} h={6} w={6} mr={2} /><chakra.h1 px={2} fontSize="sm">patterson@example.com</chakra.h1></Flex></Box></Box></Flex>;
Proudly developed in by Anuoluwapo Abraham