Card widget
An SVG icon that can be used as a button.
In-ports
config JSON — provides widget’s configuration as a JSON. External configuration will overwrite the settings defined in the Settings dialog.
Out-ports
on-click Boolean — emits true when user clicks on the icon.
Overview
Card widget renders an SVG icon image with a background and a title. It also allows specify text which will be displayed on mouse hover. When you click on the card in interactive mode it will emit a true value on the on-click output port.
Settings
Title
Widget’s title.
Icon
Icon code from Blueprint Icons collection to be displayed by the widget.
Description
Description text to display on mouse hover.
Interactive mode
Controls whether the card is clickable. When enabled, the on-click port emits true on click. Hovering over the icon will increase its elevation and change the mouse cursor to pointer.
Intent
Sets the icon and background color to visually express its intent:
- None — white icon and grey background. Neutral state. (default).
- Primary — blue icon and background to highlight the icon on UI.
- Success — green icon and background to denote success and safe operations.
- Warning — orange icon and background to denote warnings or intermediate states.
- Danger — red icon and background to denote errors or potentially destructive operations.
Custom icon color
Set custom icon color by typing a color name or specifying Hex color code. For example: Yellow, #19a74a.
Elevation
Controls the intensity of the drop shadow beneath the card.
Icon size
Icon size in percentage, where 100% is the maximum size the icon can occupy when placed on the layout. Applied only for large layouts. For small layouts icons are sized automatically to fit the tile.
Hide progress bar
Controls the visibility of widget progress bar. By default, widget progress bar is visible.
Error messages settings
Specify custom error messages to display inside the widget. You can set a message for each error code.