Cards and tiles are the primary surface on which we display content. The component itself doesn't have a specific width, instead it takes up the full space of its parent container and its height scales to that of its content.

Anatomy

Cards consist of a header, body and footer, each with their own sub-elements. In general, the most common use case will be for the header+body type of card.

A. Header

  1. Title
  2. Subtitle (optional)
  3. Border
  4. Action(s)

B. Body

C. Footer (optional) ****5. Secondary action (uses fully rounded text button) 6. Primary action (uses fully rounded text button)

https://invis.io/NMYI8LBGPTW#/429310267_Card_-_Anatomy

Headers

Card headers can contain one or more of the following items stacked one after the other:

<aside> 🔸 Note: When used with tabs or toolbars that are positioned immediately after the header, the bottom border will not be displayed.

</aside>

https://invis.io/6DZIB7QB8EH#/438469710_Card_-_Headers

Spacing