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