Empty state

An empty state should be a welcoming experience and it should be clear what to do next. This helps both for first time user to learn the system but also for more experienced since you don’t have to remember how to get started.

Guidelines

An empty state should consist of:

• Illustration that has connection of what will be shown on the page
• Short header that is either:
  • encouraging user which action to perform on a positive note, e.g “Connect your data sources”
  • stating what state the app is in, e.g “No data sources”, “All is good”
• Short descriptive text (e.g page purpose, next steps)
• Call-to-action button in primary color
  • Hide other buttons that normally appear in page header, to avoid drawing focus away from the main target

Choose illustration

Choose an illustration that corresponds to the call-to-action. Preferably choose one that Gunnel provides, from here::

• illustration-connect
• illustration-data-share
• illustration-downloading-data
• illustration-empty
• illustration-no-data

If you have a different use-case, you can either:

• request another illustration, or
• use something from undraw.co, but be sure to use the same color scheme.

Example

Implementation

• The empty-state class does not add any margin or padding. You should add this yourself as needed.
• You should add margins to <p> elements yourself as needed. mb-lg is a good choice.