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>


{% codesandbox o8f34 %}


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

Back | DEV.to


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

shadowtime2000's DEV profile image