title: Simple Chakra UI Card published: true date: 2021-01-17 20:55:53 UTC tags: React,JavaScript,CSS canonical_url: https://h.shadowtime2000.com/simple-chakra-ui-card

Simple Chakra UI Card

I am currently creating a blog with Chakra UI, so I need a card which can be created with it. This is just basically a small snippet.

The Card

function BlogPost() {
  return (
    <Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
        <Box m="5" as="a" href="/blog-post-thing">
          <Heading m="5" mb="0" as="h4" size="md">Blog Post</Heading>
          <Text m="5" mt="0">My cool blog post</Text>
        </Box>
    </Box>
  )
}

Demo

{% codesandbox o8f34 %}

Conclusion

Yeah, that's basically it. This is my first time using Chakra UI so if you have any suggestions please share them.

shadowtime2000

If you are looking at this you probably wonder who I am; teenage open source maintainer