shadowtime2000
shadowtime2000's Blog

shadowtime2000's Blog

Simple Chakra UI Card

shadowtime2000's photo
shadowtime2000

Published on Jan 17, 2021

1 min read

Subscribe to my newsletter and never miss my upcoming articles

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

Conclusion

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

 
Share this