DEV Community

shadowtime2000
shadowtime2000

Posted on • Originally published at h.shadowtime2000.com on

1

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

Demo

Conclusion

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

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more