Card widget
A card widget renders SVG icon image with a background and a title. It can be clickable if set to interactive mode.
In-ports
config JSON - provide widget configuration from external stream. External configuration will overwrite the settings defined in the Settings dialog.
Out-ports
on-click Bool - emits boolean value when user clicks on the widget. on-click port is activated only in Interactive mode.
Overview
Card widget renders SVG icon image with a background and a title. You can also specify a longer text in the description field which will be displayed in overlay on mouse over. By default Card is rendered in interactive mode. When you click on the card in interactive mode it will emit an event with boolean true value on on-click output port.
Settings
Title
Card title.
Icon
Icon code from Blueprint Icons collection.
Description
Description text is displayed in the widget overlay on mouse over.
Interactive mode
Interactive mode controls whether the card should respond to user interactions. If turned on, hovering over the card will increase the card's elevation and change the mouse cursor to a pointer.
Icon color (intent)
Set the icon color using reserved core colors which are mapped to visual intents. We use intents to convey the status of UI elements:
- White (intent:
none) default. Indicates neutral state. - Blue (intent:
primary) elevates elements from the typical gray scale UI frame. - Green (intent:
success) indicates success and safe operations. - Orange (intent:
warning) indicates warnings and intermediate states. - Red (intent:
danger) indicates errors and potentially destructive operations.
Custom icon color
Set custom icon color by specifying Hex color code (for example #19a74a).
Elevation
Use elevation to apply a drop shadow that simulates height in the UI. Five elevations are supported, from 0 to 4.
Icon size
Size of the icon, in percents. Applied only for large layout. For small layouts icon size will be calculated automatically depends on tile size.
Hide progress bar
Controls the visibility of widget progress bar. By default, widget progress bar is visible.
Hide help icon
Controls the visibility of help icon. By default, help icon is visible.