11 Codepen Examples for UI Cards
In Google Material Design guidelines, under Cards component is written: “A card is a sheet of material that serves as an entry point to more detailed information.”
Almost every website is using some sort of card to feature information. Small or big, they are a good way to present summarized information and direct the user to learn more.
Some of the most popular websites in the world are using cards to layout content. Just have a look at BBC, The Next Web, Pinterest, Facebook, Twitter, CNN… the list goes on.
So, cards are dominating the web as they are everywhere. But why is that?
Neat & Clean
Well, by using cards you can create a neat layout and group items in clean way. Users are accustomed to card designs so they can easily find what they need.
Easily to scan
We all know that users don’t read on the web so cards are a good way to show information that users can scan quickly and find what they need.
Perfect for news sites, blogs and ecommerce websites
By no means, card-based layouts reflect the needs of the users for finding quickly what they need. Even on mobile devices, cards seem to be the perfect solution for news articles, blog posts or product display.
Let’s have a look at some already coded solutions for card designs from the Codepen community.
Article news card
A great solution for news presentation with accent on the image. When hovered, a brief summary appears.
News cards – CSS only
Similar to the previous one, this card design reveals more information on hover. Although, this experiment features a full image card with a summary when the users hovers.
This card idea also relies on an image background, the difference here is what appears when the card is hovered.
A new background appears to show the users that they can click to read the whole story.
This is a well-organized card for an ecommerce shop. When users hover, they are able to see the sizes and colours available. Also, a button appears to direct them to the dedicated product page.
Another Product card
Another product card experiment which requires user interaction. The two blue elements give more information when the user clicks. When the additional card appears, you can see some more information and a Call-to-Action.
Material product card
This is a clean way to present a product card. If you click on the “cart” icon, you will see a full background that hovers the card to give instant feedback that the product is added to the shopping cart.
Star Wars product card
Unusual way to create a product card which is very creative. No interactivity here but the whole concept for the card works very well and is quite different from the popular solutions.
Creative product card
Another great example of product card design. This one also has some interactions to surprise the user.
Blog card with hover state
A beautiful and clean card for blog websites.Probably suitable for minimalist blogs relying on visuals
Clash of Clans Cards
This slideshow example of cards is a wonderful way to organize cards when the space is limited. Clean and simple, with beautiful images, this one works really well.
To sum up
Cards are very convenient when you need to organize content that lead users to learn more. Creative solutions with cards are endless. Even more, interactive elements can be added to add more information for the user. Just bear in mind that for mobile devices hover effects don’t work as expected.