Preview minimum and maximum

Card preview areas have a maximum image height aspect ratio of 3:4, and a minimum height aspect ratio of of 4:1.

Text overflow

If the card has a fixed height, such as in a tile grid, long titles will be truncated. Use short titles to avoid this. In layouts with variable height, like a waterfall grid, titles will wrap to fit.

Clickable cards

Cards, by definition, should have some form of interaction such as viewing, editing, purchasing, etc. Some actions are exposed in buttons, and others simply occur by clicking the card.

If a card only has an ability to be opened or viewed in more detail, do not include a button. Clicking anywhere on the card should perform that action.

If a card has other interactive elements such as a hidden actions menu or an avatar, but no buttons, the whole card (outside of those elements) should be clickable.

Buttons in cards

If there's only one action (that's not opening or viewing the card), use a button to communicate that action. If there are two or more available actions, and one of those actions is to open or view the card, use a button to communicate "View" or "Open," instead of relying on clicking on the card.

If a standard card has a footer with a button, only the button is clickable. If a card has a preview, clicking the preview will open that card. When a preview is purely decorative, it is not clickable.

Ghost loading

When a group of cards are loading, they follow the ghost loading convention. There are 5 phases for ghost loading:

  1. Card group (including metadata) ghost loads.
  2. If metadata for all cards is loaded before all preview images are loaded, the metadata is displayed for all cards as soon as the last piece of metadata loads. Previews continue to ghost load.
  3. If all preview images load within the x period (a period of time, usually measured in seconds, that you need to specify depending on the use case), they are shown as soon as the last preview loads.
  4. If all previews have not finished loading at the end of the x period, the loaded previews are shown, and the pending previews receive individual circle loaders. The group is no longer in a ghost loading state.
  5. If the preview load times out, an error is shown along with a mechanism to retry loading.