Card | X4Documentation

<Card> controls can be used to integrate cards into X4 Web Apps to integrate teasers or dashboards into applications, for example.

Instructions for use

A <Card> control is created with the <Card> element.

<Card>
...
</Card>

<Card> controls can be used in all available layout types: A layout must be used within the <Card> control. For more information, see Layouts.

Attributes

Note:

There are a number of default attributes that can be set for all controls. For more information about the default attributes, see Default attributes.

In addition to the default attributes, you can define the following attributes for <Card> controls.

Attribute	Description
`border`	Defines whether a border is displayed around the control. Possible values: `true`/`false`
`borderLeft`	Defines whether a left border is displayed. Possible values: `true`/`false`
`borderRight`	Defines whether a right border is displayed. Possible values: `true`/`false`
`borderTop`	Defines whether a top border is displayed. Possible values: `true`/`false`
`borderBottom`	Defines whether a bottom border is displayed. Possible values: `true`/`false`
`icon`	Specifies the icon for the control. Note: This attribute cannot be used at the same time as `iconUrl`. For more information about the `iconUrl` attribute, see Referencing Components in the Web App Definition. Data binding with Base64 values possible Possible values: Base64-encoded graphic file Path to a graphic file as a string (URI), for example, `clock.png` Note about graphic files: The graphic file must be located in the `Resources` folder just below the Web App Project. The path is specified relative to the `Resources` folder. Specifies a Material Icon, e.g. `icon:extension` Notes on Material Icons: The Material Icon must be specified with the prefix `icon`, e.g. `icon:<MaterialIconName>`. With Ctrl+Space, you get an overview of the available icons. The selection may differ from the actual available Material Icons. For more information on the actual available MaterialIicons, see https://fonts.google.com/icons (Google Fonts > Material Symbols and Icons).
`iconColor`	Defines the color of the icon. Possible values: Hexadecimal color value, e.g. `ff5a00` Note: Do not use a hash before the color value. Do not use an abbreviated notation of the color value. Color code from the color palette of the Web App, e.g. `A200` For more information, see Theming.
`subtitle`	Defines the subtitle of the card. Data binding possible Possible values: Any string Expression for data binding (`String`, `Date`, `DateTime`)
`title`	Defines the title of the card. Data binding possible Possible values: Any string Expression for data binding (`String`, `Date`, `DateTime`)

Actions

All existing actions are available for <Card> controls. For more information, see Actions.

If the Select actioin ( <SelectAction/>) and/or the DoubleClick action ( <DoubleClickAction> ) have been defined in the <Card> element, no further actions can be defined. The user can select and/or double-click the entire <Card> element. If neither action is specified, the <Card> element can contain any number of other actions.

Example

Card control in the Detail Component

XML

<Card background="#Card1Background" title="This is a Card control" subtitle="with an icon and a border" border="true" icon="icon:ballot">
    <FlowLayout>
        <Image value="logos/logo_x4_2025_RGB_orange.png"/>
    </FlowLayout>
    <Actions>
        <SaveAction displayName="Save image"/>
        <DeleteAction displayName="Delete image"/>
    </Actions>
</Card>