Cards
Content Card#
The Coldest Sunset
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
#photography#travel#winter<FlexflexDirection="column"boxShadow="lg"borderRadius="md"maxWidth="24rem"overflow="hidden"><Imagew="100%"height="auto"src="https://tailwindcss.com/img/card-top.jpg"alt="Sunset in the mountains"/><Flex flexDirection="column" px={6} py={4}><Text fontWeight="bold" fontSize="xl" mb={2} color="gray.700">The Coldest Sunset</Text><Text color="gray.700" lineHeight="normal" whiteSpace="normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibusquia, nulla! Maiores et perferendis eaque, exercitationem praesentiumnihil.</Text></Flex><Flex px={6} py={4} flexWrap="wrap"><Blockcolor="gray.700"bg="gray.200"borderRadius="full"px={3}py={1}mr={2}mb={1}>#photography</Block><Blockcolor="gray.700"bg="gray.200"borderRadius="full"px={3}py={1}mr={2}mb={1}>#travel</Block><Blockcolor="gray.700"bg="gray.200"borderRadius="full"px={3}py={1}mb={1}>#winter</Block></Flex></Flex>
Horizontal Card#
Members only
Can coffee make you a better developer?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
Jonathan Reinink
Aug 18
<Flex flexDirection={['column', 'row']} maxWidth="700px"><BlockbackgroundImage="url('https://tailwindcss.com/img/card-top.jpg')"radiusLeft={[0, '4px']}radiusTop={['4px', 0]}backgroundSize="cover"width={['100%', '30rem']}height={['12rem', 'auto']}backgroundRepeat="no-repeat"/><Blockp="16px"radiusRight={[0, '4px']}radiusBottom={['4px', 0]}borderStyle="solid"borderWidth={1}><Flex flexDirection="column"><Block mb={4}><Flex fontSize="sm" color="gray.600" alignItems="center"><Flex mr={2} alignItems="center"><Icon name="lock" size="12px" /></Flex><Text m={0} fontSize="sm" color="gray.600">Members only</Text></Flex><Text color="gray.900" fontWeight="bold" fontSize="xl" mb={2}>Can coffee make you a better developer?</Text><Text color="gray.700" fontSize="base" whiteSpace="normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibusquia, nulla! Maiores et perferendis eaque, exercitationem praesentiumnihil.</Text></Block><Flex alignItems="center"><Blockas="img"size={10}borderRadius="full"mr={4}src="https://tailwindcss.com/img/jonathan.jpg"alt="Avatar of Jonathan Reinink"/><Block fontSize="sm"><Text m={0} color="gray.900">Jonathan Reinink</Text><Text m={0} color="gray.600">Aug 18</Text></Block></Flex></Flex></Block></Flex>