In the physical world, objects can be stacked or affixed to one another, but cannot pass through each other. Objects also cast shadows and reflect light. Cards behave like objects so they should respect the same rules as objects.

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.

Examples

Card

<div class="ys-card" ></div>

Card with no shadow

<div class="ys-card ys-card--no-shadow" ></div>

Card, dark

<div class="ys-card ys-card--dark" ></div>

Card with medium corners

<div class="ys-card ys-card--medium-corners" ></div>

Card with small corners

<div class="ys-card ys-card--small-corners" ></div>

HTML guidelines

UX and Design guidelines

When to use a card

• Collection or gallery comprises multiple data types, such as images, movies, text.
• When it requires interaction such as swipe, drag and drop, tap, etc

Cards within cards

When using a card within a card, the shape should change as well, so that a Big Card contains a Medium Card which contains a Small Card

Background Image

A Card can also contain a background image for visual purposes, but in this case no content is allowed, and it should only be used as decoration.