<h2 id="simple-chakra-ui-card">Simple Chakra UI Card</h2>
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.
<h3 id="the-card">The Card</h3>
<pre><code class="lang-jsx">function BlogPost() {
 return (
 &lt;Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden"&gt;
 &lt;Box m="5" as="a" href="/blog-post-thing"&gt;
 &lt;Heading m="5" mb="0" as="h4" size="md"&gt;Blog Post&lt;/Heading&gt;
 &lt;Text m="5" mt="0"&gt;My cool blog post&lt;/Text&gt;
 &lt;/Box&gt;
 &lt;/Box&gt;
 )
}
</code></pre>
<h3 id="demo">Demo</h3>
<iframe src="https://codesandbox.io/embed/chakra-ui-blog-post-card-o8f34?fontsize=14&amp;hidenavigation=1&amp;theme=dark" style="width:100%;height:500px;border:0;border-radius:4px;overflow:hidden" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

<h2 id="conclusion">Conclusion</h2>
Yeah, that's basically it. This is my first time using Chakra UI so if you have any suggestions please share them.

## 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

```jsx
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

<iframe src="https://codesandbox.io/embed/chakra-ui-blog-post-card-o8f34?fontsize=14&hidenavigation=1&theme=dark"
 style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 title="chakra-ui-blog-post-card"
 allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
 sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>

## Conclusion

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

Simple Chakra UI Card

If you are looking at this, you are probably wondering who I am.


Articles about Javascript, Typescript, NodeJS, Deno, and everything in between.