Widget Beta

Widgets are a relatively new component for George App and currently only used inside Products.

The purpose of widgets is to surface relevant information for the user and to show it directly on one of the main views of the respective product, instead of forcing a user to navigate to nested views.

The structure of widgets is very barebones - the only fixed elements are the Header and the Footer.
The content area has to be defined by the team that owns the respective content.

Header

Widget Headers can be static or link to a detail page, indicated by a caret to the right. An optional badge next to the caret can be used to show additional information.

You can also choose to not display a Widget Header at all.

Open in Figma

Content

There are currently no detailed specifications or guidelines regarding the content of Widgets.

Try not to overload a Widget with too much information that a user needs to parse to understand its purpose.
Focus on a few key metrics or actions that are presented within the widget
Try to use the available space for visualization of information, like charts or graphs, instead of just re-building text-based interfaces.

When creating a custom Widget content component, make sure to build it with an inner padding of 16px, so that it aligns with the Headline & Footer Action when placed in the Widget Container.

Open in Figma

Open in Figma

Footer

The Widget footer can feature a text button to trigger an action related to the widget content or feature a row of 2-3 actions related to the widget content, each using an icon and a label.

You can also choose to not display a Widget Footer at all.

Open in Figma