Card
The Card widget is a surface with rounded corners and a shadow for depth, holding content together as one unit.
Use it to visually group related elements, such as list items or blocks of information.
Definition and role
The Card widget draws a rectangular surface that wraps a single child. Set its background color, shadow color, elevation, outline shape, and outer margin — it works as a container that holds the child.
- Category: Layouts
- Default child size:
100 × 100 - Leave the background color unset and the surface draws as transparent.
Features
| Feature | Description |
|---|---|
| Content grouping | Groups related elements onto a single surface so they read as one unit. |
| Depth | Elevation (elevation) and shadow color (shadowColor) make the card look like it floats above the background. |
| Shape | Use shape to set the outline border and corner rounding. |
| Background and margin | Adjust the background color (color) and the margin outside the card (margin). |
| Overflow handling | clipBehavior decides how a child is clipped when it overflows the card's bounds. |
How to use
- Open the Layouts category in the left widget palette.
- Drag and drop the Card item onto the canvas.
- Place the widgets you want to show inside the card as children.
- Adjust the background color, elevation, shape, margin, and more in the properties panel on the right.
Properties
| Property | Description | Default | Value / type |
|---|---|---|---|
color | Card background (surface) color. Draws as transparent when unset. | Not set | Color |
shadowColor | Card shadow color | Not set | Color |
elevation | Shadow depth (elevation) | Not set | Number |
shape | Card outline shape — border and corners | Not set | Shape value |
borderOnForeground | Whether to draw the border over the child content | true | true / false |
margin | Margin outside the card | Not set | Margin value |
clipBehavior | How a child is clipped when it overflows the card's bounds | Not set | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
semanticContainer | Whether accessibility treats the card as a single semantic container | true | true / false |
Notes and tips
Control depth with elevation and shadowColor. The higher the value, the wider the shadow spreads and the more the card appears to float.
Leave color (the background color) unset and the card surface draws as transparent. Set a background color when you need a visible surface.
Learn more
For the full set of Widget Controls (Property, Method, and Event) for scripting this widget, visit Card Widget Control.