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
<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" whiteSpace="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" whiteSpace="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#

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">
  <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" whiteSpace="normal">
          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" whiteSpace="normal">
          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>