Card Design
Card design controls the visual style of the outer container wrapping the chart — background color, border, inner padding, and shadow. It is configured in the Card Design step on all widget types.
How to Access
- Navigate to the Card Design step in the wizard.
- Find the Card Appearance section.
Parameters
Color & Text
| Field |
Description |
Default |
| Card Background Color |
Fill color of the outer card container. Defaults to match the dashboard background. |
— |
| Title Text Color |
Color of the card title label. Should contrast well with the background color. |
— |
| Title Font Size |
Font size of the card title text in pixels. Typically 12–24 px. |
— |
Border
| Field |
Description |
Default |
| Corner Radius |
Card corner rounding in pixels. 0 = sharp corners; 8–16 = modern rounded look; 24+ = pill shape. |
— |
| Border Thickness |
Border thickness in pixels. Set to 0 to remove the border. |
0 |
| Border Color |
Color of the card border line. |
— |
Padding
| Field |
Description |
Default |
| Padding |
Inner padding in pixels. Enter a single value (all sides) or four comma-separated values in left,top,right,bottom order. |
— |
Box Shadow
| Field |
Description |
Default |
| Shadow Color |
Drop shadow or inner glow color. |
— |
| Blur Style |
Shadow style: flat, elevated, or inset. |
— |
| Blur Radius |
Shadow blur amount in pixels. |
— |
| Offset |
Shadow X and Y offset in pixels. |
— |
| Spread |
Shadow spread distance in pixels. |
— |
Tips
- Change the background color to highlight a specific KPI or to create visual groupings of related cards.
- A thin border (1 px) visually separates the KPI card from the dashboard background.