smartCard

A card is a sheet of material that serves as an entry point to more detailed information.

Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length.

A card collection is a layout of cards on the same plane.

  • To edit a setting
  • To create a tool for ad campaigns

Usage

Cards display content composed of different elements whose size or supported actions vary.

Usage

Cards are a convenient means of displaying content composed of different elements. They’re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.

Cards are a convenient means of displaying content composed of different elements. They’re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.

Kangaroo Valley Safari

Located two hours south of Sidney in the Southern Highlands of New South Wales, ...

Share Explore

A card collection is coplanar, or a layout of cards on the same plane.

Number 10

Whiteheaven Beach
Whitsunday Island, Whitsunday Islands

Share Explore

Trip 4

Located two hours south of Sidney in the Southern Highlands of New South Wales, ...

Share Explore

Unlimited music now

Listen to your favorite artists and albums whenever and whatever, online and offline.

Listen now

Supermodel

Foster the People

Halcyon Days

Ellie Goulding

Halcyon Days

Foster the People

Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. Cards within a card collection can each contain a unique data set, such as a checklist with an action, a note with an action, and a note with a photo.

Don't overload cards with extraneous information or actions.

Content hierarchy

Use hierarchy within the card to direct users’ attention to the most important information. For example, place primary content at the top of the card, or use typography to emphasize primary content.

Images can reinforce other content in a card. However, their size and placement within the card depends on whether images are the primary content or are being used to supplement other content on the card.

Background images

Text is most legible when placed on a solid color background with a sufficient contrast ratio to the text. Text placed on image backgrounds should preserve text legibility.

Travel

New York City

Day reappeared. The tempest still ragged with undiminished fury; but the wind now returned to the south-east. It was a favourable change, and the Tankadere again

Action 1 Action 2

Recreation

Fun at the Beach

There were some signs of a calm at noon, and there became more distinct at the sun.

Action 1 Action 2

Travel

New York City

Day reappeared. The tempest still ragged with undiminished fury; but the wind now returned to the south-east. It was a favourable change, and the Tankadere again

Action 1 Action 2

Call
Jenifer

March 19, 2017

Groceries

almond milk
coconut water
cucumber
green apples

Campbell

To bring

  • camping grar
  • lantern
  • smores
  • extra blankets
  • towel for pup
  • warm socks
  • first aid kit

Clean desk

Yuna
tickets on
sale 6/24

May 19, 2017

New exhibition at Dan
"Food to Love"
6.25.14-06.26.14
740 Valencia St.