The user needs to browse content of varying types and length.
Display entry points to detailed and varied content in similar shapes. A card could contain a photo, text, and a link about a single subject.
Consider only scrolling collections of cards in one direction: horizontally or vertically. Card content that exceeds the maximum card height (if scrolling vertically) or width (if scrolling horizontally) is truncated and does not scroll, but can be expanded. Once expanded, a card may exceed the maximum height/width of the view.
A card typically includes a few different types of media, such as an image, a title, a short summary and a call-to-action button.
One of the most important things about cards, is their ability to be manipulated almost infinitely. They can be turned over to reveal more, stacked to save space, folded for a summary – and expanded for more details, sorted, and grouped.
We can hint what is on the back side or that the card can be folded out. The resemblance of Cards to the physical world makes them a great conceptual metaphor for which we can easily relate all sorts of manipulations.
Browsing is a large part of interaction, and users want to be able to quickly scan large portions of content and dive deep into their interests. Users can experience difficulty browsing text-heavy sites as displaying extra details for each item can clutter the screen and prevent efficient scanning.
Cards are great for showcasing aggregated elements whose size or supported actions vary. Each card serves as an entry point to more detailed information, so it shouldn’t be overloaded with extraneous information or actions. They are dismissible, swipeable, sortable, and filterable.
Cards allow you to present a heavy dose of content in a small and digestible manner: they divide all available content into meaningful sections, present a summary and link to additional details. A single card is a container that displays various parts of related information, from which users can get even more information.
Cards help chunk data into content that is more easily aids scanned. Furthermore, cards are:
This and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.