Cards

Content Card

Preview

The Coldest Sunset

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

#photography

#travel

#winter

Source

<Flex flexDirection="column" boxShadow="lg" borderRadius="md" maxWidth="24rem" overflow="hidden" > <Image w="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"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. </Text> </Flex> <Flex px={6} py={4} flexWrap="wrap"> <Block color="gray.700" bg="gray.200" borderRadius="full" px={3} py={1} mr={2} mb={1} > #photography </Block> <Block color="gray.700" bg="gray.200" borderRadius="full" px={3} py={1} mr={2} mb={1} > #travel </Block> <Block color="gray.700" bg="gray.200" borderRadius="full" px={3} py={1} mb={1} > #winter </Block> </Flex> </Flex>

<Flex
  flexDirection="column"
  boxShadow="lg"
  borderRadius="md"
  maxWidth="24rem"
  overflow="hidden"
>
  <Image
    w="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">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
      quia, nulla! Maiores et perferendis eaque, exercitationem praesentium
      nihil.
    </Text>
  </Flex>
  <Flex px={6} py={4} flexWrap="wrap">
    <Block
      color="gray.700"
      bg="gray.200"
      borderRadius="full"
      px={3}
      py={1}
      mr={2}
      mb={1}
    >
      #photography
    </Block>
    <Block
      color="gray.700"
      bg="gray.200"
      borderRadius="full"
      px={3}
      py={1}
      mr={2}
      mb={1}
    >
      #travel
    </Block>
    <Block
      color="gray.700"
      bg="gray.200"
      borderRadius="full"
      px={3}
      py={1}
      mb={1}
    >
      #winter
    </Block>
  </Flex>
</Flex>

Horizontal Card

Preview

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

Source

<Flex flexDirection={['column', 'row']} maxWidth="700px"> <Block backgroundImage="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" /> <Block p="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"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. </Text> </Block> <Flex alignItems="center"> <Block as="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>

<Flex flexDirection={['column', 'row']} maxWidth="700px">
  <Block
    backgroundImage="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"
  />
  <Block
    p="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">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
          quia, nulla! Maiores et perferendis eaque, exercitationem praesentium
          nihil.
        </Text>
      </Block>
      <Flex alignItems="center">
        <Block
          as="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>