Card
Cards are interactive containers that can be expanded, collapsed, dismissed off screen, or even used as a full screen surface to create a new context.

Anatomy
The card component is made up of a raised surface, and depending on the needs of the design, provides two interaction variations: simple, and complex. Cards can be simple in that the primary region is one large touch/click target, or complex housing two interactive regions — with each region containing one or more touch/click targets. The different regions are identified as either a primary region, or secondary regions (covered later).
Simple cards
Simple cards are used to initially hide content behind a tap/click, and can be expanded to reveal additional content, or morph to display completely different content. The collapsed state can only account for one interaction: expanding the card. Once the card is expanded, the secondary region is displayed. Optionally, upon expanding the card, either the secondary region is shown or both the primary and secondary regions are replaced with entirely new content.

- Primary region — Raised surface
- Secondary region (not shown until card is tapped/clicked)
Complex cards
Complex cards can also initially hide content behind a tap/click, but the main difference is complex cards display the primary and secondary regions in the collapsed state.

- Primary region — Raised surface
- Secondary region — High emphasis base surface (optional)
Note: The secondary region does not have to be a high emphasis base surface, it's shown here just as an example. The secondary region could be any static or interactive content.
States
Visually no changes are made through the various states; only the elevation changes as the user interacts with the component.
Static
Cards can appear as collapsed or expanded, and both of these “states” without any additional interaction with the user would be considered to be in a static state. Some might refer to this as an enabled state.
Pressed/active
When a card is either pressed (touch event) or clicked (mouse event) a pressed/active state is displayed to the user while the press/touch is occurring. Once the press is released and the click event is completed, the elevation returns to static state.
Disabled
Cards should never be disabled. If the user cannot interact with the content on a card, the card should not be displayed at all. The most basic purpose of a card is to provide user interaction — if interactions aren’t possible, another component should be used instead.
Hover
Hover states only apply to users utilizing a mouse to interact with UI elements, and with the card specifically, the hover state creates a unique interaction in which the card rises slightly in response to the hovered pointer. The paradigm leans on the concept of a magnetic field in which the user's pointer pulls the magnetic card surface toward it when hovering.
Focused
The visual treatment of cards when focused via navigating through the document using the keyboard or mobile OS-level accessibility gestures, is handled by either the OS or the browser, and is not styled in any special way. When interacting with cards using either a touch or mouse event, the focused state is not applied.
Dragged
When a user holds their press/click shorter than 500ms, visually nothing changes from the initial pressed/active state; but when holding the press/click longer than 500ms the card appears to lift off the surface to follow the finger/pointer. A long press can open up new opportunities for interactions such as moving the card, triggering swiping actions for data visualizations, displaying quick actions, and more.
For Web experience, dragged state could happen without a 500ms long press action. Like this cursor state for example:

Placement
Cards can be placed almost anywhere within the main content area of a view or activity. The main thing to keep in mind is that when acted upon the card should not expand beyond the viewable area of the screen. If there is a need for more space than is available on screen, transform the card into a new context.
Cards can live on their own in the flow of content, or contained together within either a card group or list.
Card group
Cards appearing within a group of other cards should all have the same height to appear uniform and indicate their relationship one to another. The width and height of each individual card should be flexible to work within many different design solutions.
Note: the card group placement is different from the selectable tile component. A selectable tile is essentially a glorified radio button or checkbox and does not have any elevation. See the selectable tile component for more information.
Card list
Cards can appear in vertical lists — the height of which is determined by the content within the cards. There is no need to ensure uniform height for each card.
Developer Docs
Vue Developer DocsComponent documentation coming soon!