Card

The Card widget is a versatile decorative container used to create visual structure, depth, and grouping within your application. It acts as a background "surface" that can be styled with elevations (shadows), borders, and custom background colors.

It is ideal for creating containers, section dividers, or high-performance decorative elements that need to adapt their styling dynamically based on application state.

The Card widgets really shines when you have placed other widgets on top and formed it into a group. When bound to an array of data (e.g. you machine fleet) it will automatically extend into beautiful tiles ideal for creating overview pages that can be drilled-down for detailed information.

Data Binding

Connect the widget to your application's logic by dragging the corresponding items from the Flow Builder.

Output

Property	Type	Description
variant	String	Dynamically switches between elevation (shadow-based) and outlined (border-based) styles.
backgroundColor	String (Color)	Programmatically sets the background color of the card.
opacity	Number	Sets the transparency of the widget (0.0 to 1.0).
borderRadius	String	Sets the corner rounding (e.g., 0px, 8px, 50%).
elevation	String	Sets the depth of the shadow (flat, low, medium, high) when the variant is elevation.
border	Object	Sets the border properties (width, color, style) when the variant is outlined.

Configuration

Card Style

These properties determine the fundamental structure of the card.

Label	Description	Type	Property
Surface Style	Choose between Elevation (uses shadows to create depth) or Outlined (uses a border).	String	variant
Elevation	(Visible if Elevation selected) Sets the depth of the shadow effect, ranging from Flat to High.	String	elevation
Border Settings	(Visible if Outlined selected) Configures the border Width, Color, and Style (solid, dashed, dotted).	Object	border

Styling & Customization

General visual settings for the card container.

Label	Description	Type	Property
Background Color	Sets the fill color of the card.	String (Color)	backgroundColor
Opacity	Adjusts the transparency of the card from fully transparent (0) to opaque (1).	Number	opacity
Corner Radius	Sets how rounded the corners are. Options range from Square to Circle.	String	borderRadius

Custom CSS Overrides

For advanced users, this section allows the addition of raw CSS properties to the container.

Label	Description	Type	Property
Property	The camelCase CSS property name (e.g., zIndex, cursor, filter).	String	key
Value	The corresponding CSS value (e.g., 100, pointer, blur(5px)).	String	value