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

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

See the Pen Article News Card by Andy Tran (@andytran) on CodePen.

A great solution for news presentation with accent on the image. When hovered, a brief summary appears.

News cards – CSS only

See the Pen News Cards – CSS only by Aleksandar Čugurović (@choogoor) on CodePen.

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.

Image hover

See the Pen #1529 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

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.

Product card

See the Pen Product Card by Virgil Pana (@virgilpana) on CodePen.

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

See the Pen Product Card wip by Marko Bolliger (@cannap) on CodePen.

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

See the Pen Product Card by Aleksandar Čugurović (@choogoor) on CodePen.

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

See the Pen #8. UI to Code – Star Wars Product Card by Praveen Bisht (@prvnbist) on CodePen.

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

See the Pen Product card by Oscar (@olhilton) on CodePen.

Another great example of product card design. This one also has some interactions to surprise the user.

Blog card with hover state

See the Pen Blog Card with Hover State by szpakoli (@szpakoli) on CodePen.

A beautiful and clean card for blog websites.Probably suitable for minimalist blogs relying on visuals

Clash of Clans Cards

See the Pen Clash of Clans Cards by Andre Madarang (@drehimself) on CodePen.

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.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *