Empty State

This component is a placeholder when content cannot be displayed, with the optional illustration and buttons.

Key Points

  • The text in this component should provide helpful instructions to the user
  • The optional buttons should follow our button group guidelines
  • The brand illustration is optional
  • This component should be placed in the center of it's container

Usage

This component is most likely used when:

  • There is dynamic content which has not loaded
  • As a placeholder until the user has completed a process which will display other data
  • If a page fails

 

Medium to Large Viewport

Medium to Large Viewport

Small Viewport Example

Small Viewport Example

 

The component provides a consistent way to provide supporting information to the user and buttons to restart or take them to a new flow.

There are two layouts for this component and their display is based on the size of the viewport.

Large screen variant

Large screen variant