Skip to main content

Card widget

A card widget renders SVG icon image with a background and a title. It can be clickable if set to interactive mode.

https://kroki.io/svgbob/svg/eNpT0NPFAHpcCjUKEOCcWJQCZdYARTHV1nDp5isk5-elZaYrKOTn6SbnZCZnK-TrcimoYypWBwDNAhc5

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.

Related#