Skip to main contentCarbon Design System

Dashboard widgets

Typography

rempxPurpose
0.875remPlex 14Widget title, link, header, body text size
0.75remPlex 12Empty / no permission / error text size

Spacing

TokenrempxRole
$spacing-lg1.524List line spacing, widget padding
$spacing-md116All other spacing between elements

Color

Carbon variableRoleValue
$ui-01Background color#ffffff
$text-01Title, header, and text color#152935
$brand-01Link color#3d70b2
$text-02Empty / no permission / error text color#5A6872
Bottom border of widget title#F0F3F6

Specs

Padding

The widget padding should be 1.5rem (24px) for the top, left, right, and bottom of the content area. All widgets should have the same padding, regardless of size.

Small Widget Normal State

Lists

You can style lists with or without rulers separating the rows. In both cases, spacing between the rows should be 32 pixels.

Widget List

States

Widgets have five distinct states, each with their own styling: normal, empty, permission, error, and loading.

  • In the normal state, text is left-aligned except for calls to action
  • In every other state, content is center-aligned with an illustration and small, grey text

Normal state

The normal state is the primary state. It occurs when a widget has been populated with data that the user has permission to see.

Normal State

Empty state

The empty state occurs when the user has no data to populate the widget.

Empty State

Permission state

This state occurs when a user does not have permission to see the widget data. For example a user may not have permission to manage other users or view usage data.

Permission State

Error state

The error state occurs when data fails to load.

Permission State

Loading state

The loading state appears while the widget data loads. Static headers are displayed as text and loading content is replaced by skeletons.

Permission State

Content

Widget tiles

Each widget has a tile that can be seen when users open the “Add widget” side panel during dashboard customization. Each tile features the widget icon, widget title, and short description (max characters: 35).

Widget Tile

Illustrations

All dashboard illustrations should be 72x72px and should match the illustration style of these sample dashboard illustrations.

Dashboard Illustration

Icons

Use the Carbon icon library for icons within the widget itself.

Resources