Problem summary

The user needs to browse content of varying types and length

Example

canopy.co

Usage

  • Use to display content composed of different elements
  • Use to showcase elements whose size or supported actions vary – like photos with captions of variable length.
  • Use when displaying content that…
    • As a collection, consists of multiple data types (images, movies, text)
    • Doesn’t require direct comparison
    • Supports content of highly variable length (captions, comments)
    • Contains interactive content

This card is part of the UI Patterns printed card deck

A collection of 54 User Interface design patterns, presented in a manner easily referenced and used as a brainstorming tool.

Get your deck!

More examples

Solution

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.

Cards can be manipulated

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.

Rationale

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.

Discussion

Cards come with several advantages:

  1. They play nice in responsive web design. Cards are designed to work with responsive web design. They reposition and reorder neatly and easily depending on the size of the screen.
  2. They make cluttered content seem organized. Card design offers stellar precision when it comes to organizing content from varying sources.
  3. They are easy to read and skim. The limited information a card displays make them easy to browse through.
  4. They are rank-free. Each card carries equal weight.
  5. They are universal. Cards are flexible and works for most content types.
Sources

1 Why Cards are the future of the web by Paul Adams

2 Cards – Components from the Google Material Design design spec

3 Play Your Cards Right: Exploring the Cards Trend in Web Design at awwwards.com


More examples of the Cards pattern See all 4 example screenshots

User Interface Design Patterns