In this article
Widgets have common settings for appearance, including size, alignment, and frame. Text color can also be controlled in certain widget types.
Each widget has common settings that control the appearance of its container.
Common widget container settings
Size - Widgets can have different sizes, including small, medium, half-width or large, based on the designer's preference for displaying the widget content on a dashboard. The default size of a widget will vary depending on the type of widget and the content it displays.
Alignment - To control the vertical alignment of the widget when next to other widgets of different heights, use the alignment setting. By default, the widget container will adjust its height to match the height of adjacent widgets. However, you can choose to fix the widget to align with the top, center, or bottom of the adjacent widget. Other alignment settings include to the bottom or center.
Frame - Control the appearance of the widget background by adjusting the frame setting. By default, widget containers have a white background and a defined outline, but you can set the frame to "none" to remove the background and border and make the widget background transparent against the background color or image.
Default frame settings
Frame with a different background color
After the frame has been removed
Note
Always test the appearance of changes before making them permanent, as removing the frame may negatively impact the readability of the information presented within the widget.
Text Color - Controls the text color in the widget. Select a text color by clicking the color sample circle.
Background Color - Controls the background color of the widget. Select a background color by clicking the color sample circle.
Tip: Revert any text and background color choices by deleting the hex codes (for example #f4a4a4) from the fields.
Shadow - Toggles the border shadow the background of your widget. Note that this change is only visible when previewing the draft or live version of your report and not in designer mode.
Infobox - Adds an Infobox to your widget. An Infobox is represented by the info icon at the top right of each widget. You can assign a label, text, add images and control the size. Images are added by using markdown in the "Infobox content" field. See below for an example, and click here for more information about markdown and images.
Example of an infobox
Adding images to an infobox using markdown
Description - Allows you to add additional text to your widget:
Description box setup
Navigate To - Enables you to click on the widget to visit another report page or subpage, Studio report or an external website.
Navigate To Example