{"componentChunkName":"component---src-pages-experimental-dashboard-widgets-style-mdx","path":"/experimental/dashboard-widgets/style/","result":{"pageContext":{"frontmatter":{"title":"Dashboard widgets","tabs":["Usage","Style"]},"relativePagePath":"/experimental/dashboard-widgets/style.mdx","titleType":"prepend","MdxNode":{"id":"b5cd2a05-30e2-5223-bb2b-f28172fdef4a","children":[],"parent":"590ad533-cc99-5231-ae5d-dede3cabd4cf","internal":{"content":"---\ntitle: Dashboard widgets\ntabs: ['Usage', 'Style']\n---\n\n## Typography\n\n| rem | px | Purpose |\n| -------- | ------- | ------------------------------------------ |\n| 0.875rem | Plex 14 | Widget title, link, header, body text size |\n| 0.75rem | Plex 12 | Empty / no permission / error text size |\n\n## Spacing\n\n| Token | rem | px | Role |\n| ---------------- | --- | --- | ---------------------------------- |\n| **\\$spacing-lg** | 1.5 | 24 | List line spacing, widget padding |\n| **\\$spacing-md** | 1 | 16 | All other spacing between elements |\n\n## Color\n\n| Carbon variable | Role | Value |\n| --------------- | ---------------------------------------- | --------- |\n| `$ui-01` | Background color | `#ffffff` |\n| `$text-01` | Title, header, and text color | `#152935` |\n| `$brand-01` | Link color | `#3d70b2` |\n| `$text-02` | Empty / no permission / error text color | `#5A6872` |\n| | Bottom border of widget title | `#F0F3F6` |\n\n## Specs\n\n### Padding\n\nThe 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.\n\n\n\n### Lists\n\nYou can style lists with or without rulers separating the rows. In both cases, spacing between the rows should be 32 pixels.\n\n\n\n## States\n\nWidgets have five distinct states, each with their own styling: normal, empty, permission, error, and loading.\n\n- In the normal state, text is left-aligned except for calls to action\n- In every other state, content is center-aligned with an illustration and small, grey text\n\n### Normal state\n\nThe normal state is the primary state. It occurs when a widget has been populated with data that the user has permission to see.\n\n\n\n### Empty state\n\nThe empty state occurs when the user has no data to populate the widget.\n\n\n\n### Permission state\n\nThis 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.\n\n\n\n### Error state\n\nThe error state occurs when data fails to load.\n\n\n\n### Loading state\n\nThe loading state appears while the widget data loads. Static headers are displayed as text and loading content is replaced by skeletons.\n\n\n\n## Content\n\n### Widget tiles\n\nEach 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).\n\n\n\n### Illustrations\n\nAll dashboard illustrations should be 72x72px and should match the illustration style of these [sample dashboard illustrations](https://ibm.box.com/s/f2efq7ylbuwlfwnpwdqzk45c6mkz17bc).\n\n\n\n### Icons\n\nUse the [Carbon icon library](/guidelines/iconography/library) for icons within the widget itself.\n\n## Resources\n\n- [Widget Sticker Sheet](https://ibm.box.com/s/13qdd7bgbhg7fv9xfty7g3ho9wtkwxdh)\n- [Sample Dashboard Illustrations](https://ibm.box.com/s/f2efq7ylbuwlfwnpwdqzk45c6mkz17bc)\n- [Service Framework](https://cloud.ibm.com/docs/service-framework?topic=service-framework-user-experience-ux-#ux015-dashboard-widgets)\n- [Developer Guidelines](https://test.cloud.ibm.com/docs/developing/get-coding/console-sdk?topic=onboarding-step1-build)\n","type":"Mdx","contentDigest":"15866f9bab36fe734777f012374230c7","counter":1621,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Dashboard widgets","tabs":["Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Dashboard widgets\ntabs: ['Usage', 'Style']\n---\n\n## Typography\n\n| rem | px | Purpose |\n| -------- | ------- | ------------------------------------------ |\n| 0.875rem | Plex 14 | Widget title, link, header, body text size |\n| 0.75rem | Plex 12 | Empty / no permission / error text size |\n\n## Spacing\n\n| Token | rem | px | Role |\n| ---------------- | --- | --- | ---------------------------------- |\n| **\\$spacing-lg** | 1.5 | 24 | List line spacing, widget padding |\n| **\\$spacing-md** | 1 | 16 | All other spacing between elements |\n\n## Color\n\n| Carbon variable | Role | Value |\n| --------------- | ---------------------------------------- | --------- |\n| `$ui-01` | Background color | `#ffffff` |\n| `$text-01` | Title, header, and text color | `#152935` |\n| `$brand-01` | Link color | `#3d70b2` |\n| `$text-02` | Empty / no permission / error text color | `#5A6872` |\n| | Bottom border of widget title | `#F0F3F6` |\n\n## Specs\n\n### Padding\n\nThe 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.\n\n\n\n### Lists\n\nYou can style lists with or without rulers separating the rows. In both cases, spacing between the rows should be 32 pixels.\n\n\n\n## States\n\nWidgets have five distinct states, each with their own styling: normal, empty, permission, error, and loading.\n\n- In the normal state, text is left-aligned except for calls to action\n- In every other state, content is center-aligned with an illustration and small, grey text\n\n### Normal state\n\nThe normal state is the primary state. It occurs when a widget has been populated with data that the user has permission to see.\n\n\n\n### Empty state\n\nThe empty state occurs when the user has no data to populate the widget.\n\n\n\n### Permission state\n\nThis 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.\n\n\n\n### Error state\n\nThe error state occurs when data fails to load.\n\n\n\n### Loading state\n\nThe loading state appears while the widget data loads. Static headers are displayed as text and loading content is replaced by skeletons.\n\n\n\n## Content\n\n### Widget tiles\n\nEach 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).\n\n\n\n### Illustrations\n\nAll dashboard illustrations should be 72x72px and should match the illustration style of these [sample dashboard illustrations](https://ibm.box.com/s/f2efq7ylbuwlfwnpwdqzk45c6mkz17bc).\n\n\n\n### Icons\n\nUse the [Carbon icon library](/guidelines/iconography/library) for icons within the widget itself.\n\n## Resources\n\n- [Widget Sticker Sheet](https://ibm.box.com/s/13qdd7bgbhg7fv9xfty7g3ho9wtkwxdh)\n- [Sample Dashboard Illustrations](https://ibm.box.com/s/f2efq7ylbuwlfwnpwdqzk45c6mkz17bc)\n- [Service Framework](https://cloud.ibm.com/docs/service-framework?topic=service-framework-user-experience-ux-#ux015-dashboard-widgets)\n- [Developer Guidelines](https://test.cloud.ibm.com/docs/developing/get-coding/console-sdk?topic=onboarding-step1-build)\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/experimental/dashboard-widgets/style.mdx"}}}}