From these small points we only need to pay attention to a few aspects in terms of the element’s anatomy.<\/p>\n\n\n\n
Obviously, many of the elements end up being optional and for that same reason today I’m only going to focus on just these:<\/p>\n\n\n\n
- Container – contains all the elements of the card and generally these same elements dictate the size of the card however, I like to do the opposite which is to define the maximum space they can occupy;<\/li>
- Thumbnail – it’s an important visual element, however this article will be for stylistic reasons;<\/li>
- Buttons – usually the buttons are grouped in a single space and each button corresponds to an action that the user can take;<\/li><\/ul>\n\n\n\n
And one of the aspects that I find interesting is that it’s a component that generally has great behaviors in terms of responsiveness.<\/p>\n\n\n\n
Anyway, these are just a few aspects that I take into account when working with interface elements, so I recommend reading this Material Design<\/a> page which explains in detail what kind of behavior this component should have.<\/p>\n\n\n\n
<\/a> Today’s example<\/h2>\n\n\n\n
In today’s example we will make a simple card, but in my opinion it has a very different design when compared to many libraries and frameworks. A behavior I recommend adopting is to spend a few minutes daily to see designs that you find interesting and I tried to copy them. I hope that at the end of today’s article you have a similar result:<\/p>\n\n\n\n
![\"card](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--f7dHlgKX--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880\/https:\/\/res.cloudinary.com\/dj5iihhqv\/image\/upload\/v1636823266\/Kapture_2021-11-13_at_16.58.08-min_sqbpz7.gif\")
<\/a><\/figure>\n\n\n\n<\/a> Let’s code<\/h1>\n\n\n\n
The framework we are going to use today is Tailwind CSS and along with this framework we are going to use other tools such as classnames and react-icons.
<\/p>\n\n\n\nnpm install classnames react-icons\n<\/code><\/pre>\n\n\n\nAfter that we will create a file that contains the contents of the cards.
<\/p>\n\n\n\n\/\/ @src\/data\/posts.js\n\nexport default [\n {\n title: \"Rogue's Rise\",\n likes: Math.floor(Math.random() * (50 - 0) + 0),\n image: \"https:\/\/bit.ly\/3BQdTqk\",\n },\n {\n title: \"Fool's End\",\n likes: Math.floor(Math.random() * (50 - 0) + 0),\n image: \"https:\/\/bit.ly\/3CQFPvv\",\n },\n {\n title: \"A Greater Power\",\n likes: Math.floor(Math.random() * (50 - 0) + 0),\n image: \"https:\/\/bit.ly\/3ERuyMd\",\n },\n {\n title: \"2099: Oasis\",\n likes: Math.floor(Math.random() * (50 - 0) + 0),\n image: \"https:\/\/bit.ly\/3CQKSwb\",\n },\n];\n<\/code><\/pre>\n\n\n\nNow we can start working on our card but first let’s create the styles for our component:
<\/p>\n\n\n\n\/* @src\/components\/Card.module.css *\/\n\n.wrapper {\n @apply bg-white hover:bg-gray-800 shadow-xl hover:shadow-none cursor-pointer w-80 rounded-3xl flex flex-col items-center justify-center;\n}\n\n.wrapperAnime {\n @apply transition-all duration-500 ease-in-out;\n}\n\n.header {\n @apply relative mt-2 mx-2;\n}\n\n.imageWrapper {\n @apply h-56 rounded-2xl overflow-hidden;\n}\n\n.image {\n @apply object-cover w-full h-full;\n}\n\n.textWrapper {\n @apply pt-10 pb-6 w-full px-4;\n}\n\n.text {\n @apply font-medium leading-none text-base tracking-wider text-gray-400;\n}\n\n.badgeWrapper {\n @apply absolute bottom-0 left-0 -mb-4 ml-3 flex flex-row;\n}\n\n.dangerBadge {\n @apply h-10 w-10 flex items-center justify-center text-xl bg-white hover:bg-red-500 text-red-500 hover:text-white rounded-2xl shadow-xl;\n}\n\n.primaryBadge {\n @apply h-10 w-16 ml-2 bg-white hover:bg-blue-600 flex items-center justify-center font-medium text-blue-600 hover:text-white rounded-2xl shadow-xl;\n}\n\n.counter {\n @apply text-gray-800 ml-2;\n}\n\n.badgeAnime {\n @apply transform-gpu translate-y-0 hover:-translate-y-1 transition-all duration-300 ease-in-out;\n}\n<\/code><\/pre>\n\n\n\nNow we can start working on our component’s jsx. Our component will receive four props, which will be the title, the number of likes, the order of the array element and the image.<\/p>\n\n\n\n
After that we can import our icons and we can start applying the styles of our component:
<\/p>\n\n\n\n\/\/ @src\/components\/Card.jsx\n\nimport React from \"react\";\nimport classNames from \"classnames\";\nimport { AiFillHeart } from \"react-icons\/ai\";\nimport { BsChatSquareFill } from \"react-icons\/bs\";\n\nimport styles from \".\/Card.module.css\";\n\nconst Card = ({ title, likes, order, image }) => {\n return (\n <div className={classNames([styles.wrapper, styles.wrapperAnime])}>\n <div className={styles.header}>\n <div className={styles.imageWrapper}>\n <img src={image} className={styles.image} alt=\"\" \/>\n <\/div>\n <div className={styles.badgeWrapper}>\n <div\n className={classNames([styles.dangerBadge, styles.badgeAnime])}\n >\n <AiFillHeart \/>\n <\/div>\n <div\n className={classNames([\n styles.primaryBadge,\n styles.badgeAnime,\n \"group\",\n ])}\n >\n <BsChatSquareFill \/>\n <span\n className={classNames([styles.counter, \"group-hover:text-white\"])}\n >\n {likes}\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n <div className={styles.textWrapper}>\n <h1 className={styles.text}>{`${order}. ${title}`}<\/h1>\n <\/div>\n <\/div>\n );\n};\n\nexport default Card;\n<\/code><\/pre>\n\n\n\nLast but not least we have to go to our entry file (which in this case is App.jsx) and we will have the following styles:
<\/p>\n\n\n\n\/* @src\/App.module.css *\/\n\n.section {\n @apply bg-gray-100 h-full md:h-screen w-full;\n}\n\n.container {\n @apply container mx-auto px-0 md:px-4 py-4;\n}\n\n.layout {\n @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 justify-items-center gap-4;\n}\n<\/code><\/pre>\n\n\n\nNow in our App.jsx we’re going to import our data from the posts and our Card component that we created, then we’re going to loop and pass in the necessary props.
<\/p>\n\n\n\n\/\/ @src\/App.jsx\n\nimport React from \"react\";\n\nimport styles from \".\/App.module.css\";\nimport Card from \".\/components\/Card\";\nimport posts from \".\/data\/posts\";\n\nconst App = () => {\n return (\n <main className={styles.section}>\n <section className={styles.container}>\n <div className={styles.layout}>\n {posts.map((element, index) => (\n <Card\n key={index}\n title={element.title}\n likes={element.likes}\n order={index + 1}\n image={element.image}\n \/>\n ))}\n <\/div>\n <\/section>\n <\/main>\n );\n};\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<\/a> Conclusion<\/h2>\n\n\n\n
As always, I hope you found it interesting. If you noticed any errors in this article, please mention them in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"
One of my favorite components is undoubtedly cards and the reasons are very simple, they can have many uses.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[65,189],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2325"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2325"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2325\/revisions"}],"predecessor-version":[{"id":2326,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2325\/revisions\/2326"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}