Card

v2.104.0

This widget is used to display content in a card container, similar to a group but with a more prominent visual style using Ant Design’s Card component.

<card col="1">
    <label string="This is a label inside a card" />
    <label string="This is another label inside a card" />
</card>

This is a label inside a card

This is another label inside a card

A card with a title

<card col="1" title="Card title">
    <label string="This is a label inside a card" />
</card>

Card title

This is a label inside a card

A card with title and icon

The icon appears on the left side of the title.

<card col="1" title="Card title" icon="user">
    <label string="This is a label inside a card" />
</card>

Card title

This is a label inside a card

A card with different icons

<card col="1" title="User Information" icon="user">
    <label string="Name: John Doe" />
</card>

<card col="1" title="Settings" icon="setting">
    <label string="Configuration options" />
</card>

<card col="1" title="Statistics" icon="bar-chart">
    <label string="Dashboard metrics" />
</card>

User Information

Name: John Doe

Settings

Configuration options

Statistics

Dashboard metrics

A card with a spinner inside

Is possible to add a spinner inside the card to indicate that the card is loading.

<card col="1" title="Card title" loading="1">
    <label string="This is a label inside a card" />
</card>

Card title

Loading...

This is a label inside a card

Note

You can use attrs to set the attribute of loading depending on a condition. See the attrs documentation for more information.

Card without title

A card can be used without a title, acting as a simple container with card styling.

<card col="1">
    <label string="Content without title" />
</card>

Content without title

Differences with Group

While the card widget is similar to the group widget, there are some key differences:

• Visual Style: Card uses Ant Design’s Card component which provides a more prominent box with shadow and padding
• Icon Position: In Card, the icon appears on the left side of the title, integrated into the title area
• Use Case: Card is better suited for dashboards and summary views, while Group is more appropriate for form sections

API

Property	Description	Type	Default	Version
colspan	The number of columns that the card will span	number	1	-
col	The number of columns that will have inside the card	number	4	-
title	The title of the card	string	-	-
icon	The icon to display on the left side of the title	string	-	-
loading	If the card is loading to show a Spinner	boolean	-	-