Skip to main content

Card

The Card widget is used to represent some related information in a box with rounded corners and a slight shadow for a 3D effect. For example, you can use a Card widget to show a Business card, restaurant information, movie details, etc.

The Card widget is often used with a List to display the item information for a specific record.

img.png

Adding Card Widget​

Here's an example of how you can use a Card widget in your project:

  1. Open the Widget Palette and locate the Card widget under the Layout Elements tab. You can drag it into your desired location or add it directly from the widget tree or canvas area.
  2. Start with adding a Row or Column widget inside the Card and build the UI as per your requirements.

Customizing​

You can customize the appearance and behavior of this widget using the various properties available under the Properties Panel.

Styling the Card​

Styling helps you customize a widget that matches your design. The Card widget allows you to customize the background color, elevation, and rounded corners.

Here's how you stylize the Card widget:

  1. Select the Card widget and move to the Properties Panel > Card Properties.
  2. To change the background color, modify the Color property.
  3. To change the elevation (depth or Z-axis), enter the value in the Elevation property.
  4. To create the rounded border, use the Border Radius property. For uniform curvature on all sides, use the Uniform Radius option by sliding the adjustment bar or inputting your preferred value directly.