DEV Community


Simple Chakra UI Card

shadowtime2000 profile image shadowtime2000 Originally published at on ・1 min read

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>
Enter fullscreen mode Exit fullscreen mode



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

Discussion (0)

Editor guide