Used in cases when we might not be able to display content, such as when an error is preventing us from fetching the data (i.e. error states) or when there isn't even any data available (i.e. empty states).

Anatomy

  1. Title
  2. Subtitle (optional)
  3. Body
  4. Pictogram - Pictogram or Icon
  5. Primary action - Solid Button (optional)
  6. Secondary actions - Text Button (optional)

https://invis.io/EGYKO2ZQ9HX#/429935409_Placeholder_Box_-_Anatomy

Variations

Depending on the pattern of behaviour, we will use one of two types of placeholder boxes, each available in two sizes. For empty states we will use the vertical variation, whereas for error states we will use the horizontal variation.

Vertical

Horizontal