The rise of the smartphone has ushered in a new way of thinking among web designers and developers, who need to create websites that work on smaller screens.

The constraints of smaller screens have actually helped the web to become that little bit more modular, with responsive design now one of the foremost web design trends: pages can be broken up into their constituent parts, and reordered on the fly, depending on browser or screen sizes. Content spread over three or four columns can be repositioned into just one. 

This has refocused attention on 'cards', as a design pattern for displaying information in bite-sized chunks. Cards are ideal for the TL;DR generation, perfect for mobile devices and responsive design, and I think we'll be seeing a lot more of them in the months and years ahead. The format may not be new, but it's on the rise.

What is a card, exactly? Well, they come in all kinds of shapes and sizes, but commonly cards will include information such as a title, a user name, a picture, and various icons. Sometimes there might be a brief amount of text, for example a product description. In a sense, they are miniature, condensed web pages.  

Cards were one of my 18 web design trends for 2014, and I wanted to highlight some beautiful examples of card-based user interfaces. Tuck in!

Wander Card

A picture and brief description, plus icons that convey further information.

Mail Client

A concept by Roman Shkolny.

Food widget

Cards, like your smartphone, don't always have to remain in portrait mode. They can be landscape too...

Prismatic story card

An avatar, a user name, a timestamp, a category tag, a title, a nice picture, and a bunch of interaction icons. Who says cards and mobile screens are limited? Nice work, by Nate Navasca.


Pinterest has been highly influential around visual design in recent years. Countless websites have emulated its easily-digestible, card-based layout. 


Cards work well when you need to condense key information and a picture in a highly browsable format. 


Edi Gil designed this as a concept.


I'm about a 2. 

City Guides

Cards are a perfect choice for guidebooks and apps. 


Justin Woods embraced the card format for this location-based social network.

Supermanager ACB

Some card patterns look more like traditional cards than others. Anybody fancy a game of Top Trumps?

Temperature Card II

I keep seeing so many good looking weather apps! Bruno Passos mashes up a card-based approach with flat design and accumulates more karma from the Gods Of Design.


A rather beautiful card-centric Tumblr theme by Oliur.


Speaking of themes, here's one for Wordpress.

Linkedin homepage concept

Emerson McIntyre imagined browsing LinkedIn in passive mode, and used cards to render content in a snackable format.

For further reading on cards, check out this excellent overview by Paul Adams, and also this practical piece on design patterns for cards.

Max Tatton-Brown also wrote about Twitter Cards ('action+caption') on this blog recently, which is well worth a read. Cards as a native ad format!

Finally, when researching this post I stumbled across these marvellous UC cards. Potentially useful for offline wireframing and IA planning.

What do you think? Who else is doing a good job with cards? Do leave a comment below...

Chris Lake

Published 3 April, 2014 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

You might be interested in

Comments (7)

Save or Cancel

Colleen Stratton

Great tips,here. Many thanks.

The thinking about leaning your marketing toward Mobile is, of course, something that we saw coming for a while, but all businesses can make themselves more attractive to prospects in these ways. Who chooses content? The vendor, or are they taken from customer polling ?

over 4 years ago


Sofia Rhodes

Being Frank, I have never seen such designs in my life. This is real exciting. I must say, you have areal collections of fantastic designs which we can upload it in various websites. Most of the mobile or technology website look for such designs so that it can attract visitor at a glance and you did it.. Cheers..!!!

over 4 years ago


Krish TechnoLabs

Cards are incredible for showing straightforward content. One isn't going to show a complex document with cards, however.

over 4 years ago

Kevin Pham

Kevin Pham, Responsive Web Design at ProWeb365

That's really creative! thanks!

over 3 years ago


Sanne Seyer-Hansen, Digital Communications Manager at Chr. Hansen A/S

Do you have any examples of B2B companies converting their traditional websites into websites based on the card concept?

over 3 years ago


Komal Sharma, Manager at Komal

Call me on +91 9742168010, I am High Profile Model an Independent Escort in Bangalore, Escorts Bangalore, Escort Service in Bangalore.

about 1 year ago


Roshani Patel, Model at Roshani

Call Now 9742659185 Roshani Patel the independent escort service in Bangalore which offer best Bangalore escort services to VIP customers

about 1 year ago

Save or Cancel

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.