<Flex as={LinkBox} flexDir="column" rounded="16px">
<AspectRatio ratio={2 / 1}>
// put the image here
</AspectRatio>
<Flex flexGrow={1} flexDir="column" px={8} py={6}>
<Heading as="h2" mb={4}>
<LinkOverlay href={slug}>
{title}
</LinkOverlay>
</Heading>
<Text fontSize="lg" flexGrow={1} mb={6}>
{desc}
</Text>
<Author authorId={authorId} date={date} />
</Flex>
</Flex>;
ChakraUI Tip 💡
The whole card is clickable
The <a/> tag is located here