Cards

The user wants to see an overview of the larger set of available content.

Problem

The user wants to see an overview of the larger set of available content.

Solution

Use cards to render a summary or highlight of the full content. The cards can contain photos, text and can link to the more expanded and detailed information.

Use cards to enclose multiple data types into one entity like images, text, audio and video.

Cards usually provide an overview of the greater dataset and serve as an entry point to more detailed content. Don't overload with too much information.

Use the swipe gesture to navigate cards laid out horizontally. When rendering multiple card collections, vertical scrolling should be used for finding the correct collection.

Cards can contain additional actions like shortcuts, and primary call to action. Try to limit these to a maximum of two while concentrating only on the most important tasks.

Use icon and text buttons and compact UI controls, like a rating slider for providing the necessary interactivity.

  • Collection views
  • Rating action
  • Actions
  • Variable content
Showing 4 live examples
Collection views

New & Updated Games

  • Worms 3
    Team 17 Digital Limited
    4.2
  • Candy Crush Saga
    King
    4.3
  • Angry Birds
    Rovino
    4.4
  • Need for Speed™ No Limits
    ELECTRONIC ARTS
    4.3
  • Hearthstone
    Blizzard Entertainment Inc.
    4.2
  • Fruit Ninja
    Halfbrick Studios
    4.3
  • Subway Surfers
    Kiloo
    4.4
  • Temple Run
    Imangi Studios
    4.3
  • Minecraft: Pocket Edition
    Mojang
    4.4

Media & Video Apps

  • VLC for Android
    Videolabs
    4.3
  • RealPlayer®
    RealNetworks, Inc.
    4.3
  • Motorola Gallery
    Motorola Mobility LLC.
    3.9
  • Reverse Movie FX
    Bizo Mobile
    4.6
  • SURE Universal Remote
    Tekoia Ltd.
    4.4
  • Ringdroid
    Ringdroid Team
    4.4
  • Funny Camera - Video Booth Fun
    Kiloo
    4.1
  • GIF Keyboard
    IRiffsy, Inc.
    4.1
  • BSPlayer
    BSPlayer media
    4.4
  • video audio cutter
    mytechnosound
    4.3

New & Updated Apps

  • Netflix
    Netflix, Inc.
    4.4
  • Colorfy - Coloring Book Free
    Fun Games For Free
    4.7
  • Wego Flights & Hotels
    Wego.com
    4.3
  • Alibaba.com B2B Trade App
    Alibaba.com Hong Kong Limited
    4.1
  • 5K Run: 5K Runner®
    Fitness22
    4.4
  • Nuzzel News
    Nuzzel, Inc.
    4.3
  • Solar System Explorer 3D
    Neil Burlock
    4.5
  • Elevate - Brain Training
    Elevate Labs
    4.5
  • Deezer Music
    Deezer Mobile
    4.1

Tools

  • Notes
    Rabbit
    4.2
  • CPU-Z
    CPUID
    4.5
  • Remote Mouse
    Remote Mouse
    4.1
  • Smart Key
    Sony Mobile Communications
    4
  • Speed Test - Internet
    Yuhi Development, LLC
    4.0
  • InNote
    INTSIG
    4.0
  • File Manager
    TACOTY APP
    4.0
  • Link2SD
    Bulent Akpinar
    4.3
  • Mobiscroll App
    Acid Media
    4.6

Capture the Moment

  • High-Speed Camera
    HANTOR
    4.1
  • Candy Camera
    JP Brothers, Inc.
    4.3
  • Lidow:layout snap
    Photo Group
    4.5
  • Cameringo Lite. Effects Camera
    Perraco Labs
    4.2
  • Open Camera
    Mark Harman
    4.2
  • Photo Editor Pro
    Zentertain
    4.3
  • Camera FV-5 Lite
    FGAE
    4.0
  • Retrica
    Venticake Inc.
    4.3
  • PIP Camera - Photo Editor Pro
    Fotoable,Inc.
    4.4
Collection views
This example should be experienced in full screen
View in full screen
Rating action

Barry Lyon

Chief Technology Officer
(202) 555-0193
0

Hortense Tinker

Network Engineer
(202) 555-0127
0

Arlene Sharman

Certified Personal Trainer
(202) 555-0190
0

Angelica Geary

Designer
(202) 555-0442
0

Carl Hambledon

Java developer
(202) 555-0639
0

Lowell Christophers

Frontend developer
(202) 555-0354
0
Rating action
Actions

Best places to seek silence

The Dhamma Giri, a vipassana meditation retreat.

Best animal adventures for families

A young panda tests his climbing skills at the Chengdu Research Base.

Best places to test your survival skills

A view across the Turnagain Arm on Alaska's Kenai Peninsula.

Most accessible destinations

The impressive Mayan site of Chichén Itzá..

The world’s most extraordinary sleepovers

Explore the azure depths with a stay at the Manta Resort's underwater room.

Best luxe experiences for budget travellers

Las Vegas lights up the night.

Actions
Variable content
    • San Francisco

      Sunny 68°
      MON

      65°
      41°
      TUE

      60°
      31°
      WED

      80°
      65°
      THU

      76°
      61°
      FRI

      79°
      60°
    • 15 minutes to Work

    • New Flash episode
      9:00 PM today
    • Mira Frank's Birthday today

    • Morning workout
      Tomorrow Morning
    • Best animal adventures for families

      A young panda tests his climbing skills at the Chengdu Research Base.

      Read more...
    • George Lopez's Birthday today

    • Best places to test your survival skills

      A view across the Turnagain Arm on Alaska's Kenai Peninsula.

      Read more...
    • Football
      8:00 PM tomorrow
    • The world’s most extraordinary sleepovers

      Explore the azure depths with a stay at the Manta Resort's underwater room.

      Read more...
    Variable content

    Problem

    The user wants to see an overview of the larger set of available content.

    Solution

    Use cards to render a summary or highlight of the full content. The cards can contain photos, text and can link to the more expanded and detailed information.

    Use cards to enclose multiple data types into one entity like images, text, audio and video.

    Cards usually provide an overview of the greater dataset and serve as an entry point to more detailed content. Don't overload with too much information.

    Use the swipe gesture to navigate cards laid out horizontally. When rendering multiple card collections, vertical scrolling should be used for finding the correct collection.

    Cards can contain additional actions like shortcuts, and primary call to action. Try to limit these to a maximum of two while concentrating only on the most important tasks.

    Use icon and text buttons and compact UI controls, like a rating slider for providing the necessary interactivity.

    Share in SMS
    • SMS