Go to Content
Design System
Playroom Storybook
🌹 Graz - George Design System stands in solidarity with the victims and families affected by the tragic school shooting in Graz. Our hearts go out to all those impacted by this senseless act of violence.

StatusInfo

Open in Storybook Open in Figma

StatusInfo communicates information to the user with additional visual weight.

It is often used as an “Empty State” placeholder – to avoid having large empty areas, but also to describe what might show up in this area once certain criteria are met, e.g. the user has added the first item to a previously empty list.

StatusInfo is also used to create Success & Error cards.

Usage

For good looks, even in its purest form, the StatusInfo always comes with a nice big icon/animation and a headline.

Nested inside a card

Per default, the StatusInfo has to be shown inside a card.

Loading demo…
Do
  • Try to add a call to action to an StatusInfo or display information on how to remove the Empty State.
Rules For Designers
  • Usage of an icon/animation and headline is mandatory
  • Usage of body text and call to action (primary and secondary) is optional
  • If a StatusInfo is the first element of a page, it should replace the H1 to avoid redundancy
  • Important components such as credit card box, function card, alert, etc. are to be positioned above the empty state
  • Primary actions (e.g. a FunctionCard) are to be positioned above an empty state
  • Secondary actions (e.g. “Create from preset”) are to be positioned below an empty state
Rules For Copywriters
  • If the headline breaks on desktop, shorten the headline. Otherwise there are too many lines on mobile phones.
Rules For Accessibility
  • H1 should be hidden

On regular background

As an exception, the StatusInfo can be placed on a default background.

Loading demo…

Rich content

Rich content and a multitude of buttons can be used as well.

Loading demo…

Icons

A grey icon ($color-gray-300 (#a3b5c9)) must be used when the product is empty or there is no content to display.

Rules For Designers
  • Icons have to be descriptive
  • Use the file icon for an StatusInfo with documents
  • Use the list icon for an StatusInfo with lists
  • Use the comment icon for an StatusInfo with messages
  • Use the search icon for an StatusInfo with filter or search results
  • You may use custom icons if applicable - in all other cases of StatusInfos use the empty-state-generic icon
With documents
file
With lists
list
With messages
comment
With filter or search results
search
Default
emptystate