Board components

Made up of three components that work together to allow users to interact with, move, and configure a board layout.

Published: March 10, 2023
Configurable dashboard demo

On this page

Board

Provides the base for a configurable layout, including drag and drop, responsiveness and grid.

Board item

A board item is a self-contained user interface (UI) element living within a board.

Items palette

Provides the ability to add board items to a board layout when combined with discreet split panel.

Guidance on creating a configurable dashboard

For information about how to design and build a configurable dashboard experience using board components, see Service dashboard, Configurable dashboard and Dashboard items patterns.

How components work together

Configurable dashboard pattern consists of three components, board, board item and items palette.

Essentially, this pattern is a board component that contains board items within it. Individual board item components should be used for each content type you want to display on the board. These board item components are configurable (resizable and draggable).

The items palette component provides the ability to add new content types to the board via drag-and-drop. Items palette content should also be featured in the board item component. For the best experience, we recommend using the split panel component, in discreet mode.

For an example of a configurable dashboard built using board items, see this demo.

How the components work together. Board item inside a board, followed by a item palette inside a discreet split panelHow the components work together. Board item inside a board, followed by a item palette inside a discreet split panel