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.
<div class="ys-card" ></div>
<div class="ys-card ys-card--no-shadow" ></div>
<div class="ys-card ys-card--dark" ></div>
<div class="ys-card ys-card--medium-corners" ></div>
<div class="ys-card ys-card--small-corners" ></div>
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
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.