Skip to main content
StateScreenState screens are pre-designed layouts created for various purposes, including FTEs, empty states, success messages, error screens, and more. State screens can occupy a full screen or a portion of it. They can be used in both modals and pushed screens.
OverviewThe State screen component is composed of a visual, title, subtitle, CTA, link button, and disclaimer. Each element is optional and they all can be combined in various ways to meet different needs. State screens can occupy a full screen or a portion of it. They can be used in both modals and pushed screens.
Visual TypesThe State Screen component can be used with or without a visual.
A visual can be an illustration, marketing visual, cover image or an icon.
Structure
AlignmentContent aligned to the center of the screen.
Cover Image Implementation

When using the State Screen with a cover image, in a full screen, the component is split into 2 sections; cover image and content.

Default Containers Ratio Mobile Phone: 50% - Cover Image 50% - Content

Tablet: 60% - Cover Image 40% - Content (Max 70% for Image container)

Image Implementation

  • Do not scale the image at any size.
  • Image is pinned to bottom of the container.
  • Image is aligned to center of the screen.
  • Excess height+Width is being cropped.
Tablet

Image Artboard Size 50% Image Container - 1366x640 60% Image Container (default) - 1366x765 70% Image Container - 1366x895

Safe Area - 768x430

Recommended Area - 672x356