Card widget

A card widget combines images, text, and a button to communicate information quickly and enable customers to make faster decisions.

Example

Properties

Property

Description

Data type

cardButtons

Optional buttons displayed in the card footer. These can be any button-item types, and they support the same values as those types.

string

cardImage

Optional property for specifying card-image display format. Supported values are: top, left, right, and overlay.

Note: Displaying the header, described below, hides the card image.

enum

cardSubTitle

Optional card subtitle text.

Note: Relevant only if the value of cardImage, described above, is overlay.

string

cardText

Optional card description text.

Note: Relevant only if the value of cardImage, described above, is overlay.

string

cardTitle

Optional card title text.

Note: Relevant only if the value of cardImage, described above, is overlay.

string

header

Optional text displayed in the header area.

Note: Displaying the header hides cardImage, described above.

string

id

Unique identifier of this widget.

string

listGroup

Optional listgroup displayed in the card body.

string

size

Width of the card, in pixels.

integer
type Rich-media type, which is always Card. string

cardImage Properties

cardImage property

Description

Data type

align

Position of the image relative to the parent card, which is one of: top | center | bottom.

enum

cardBorderRadius

Card border radius, in pixels.

integer

cardShadow

Card box shadow, in pixels.

integer

height

Image height, in pixels. Required when either:

  • cardImage position, described above, is left or right.

  • position, described below, is top, and width, described below, is provided.

integer

position

Position of the card image, which is one of: left | top | right | overlay.

enum

spaceAround

Padding around the image, in pixel.

Tip: This is useful when width, described below, and height, described above, are provided.

integer

src

Image URL.

string (URL)

width

Image width, in pixels. Required when card cardImageposition, described above, is left or right.

integer

Context properties

Context property

Description

Data type

bottomSeparator

Separator between card buttons and body

string

cardBorder

Card border color, as a hex color code.

string (hex color code)

cardSelectedBorder

Border color indicating the user-selected card, as a hex color code.

string (hex color code)

color

Card background color, as a hex color code.

string (hex color code)

header

Header text color, as a hex color code.

string (hex color code)

headerBackground

Header background color, as a hex color code.

string (hex color code)

subTitle

Title color, as a hex color code.

string (hex color code)

subTitleSize

Subtitle size, in pixels

integer

subTitleStyle

Subtitle style

string

text

Body text color, as a hex color code.

string (hex color code)

textSize

Card text size, in pixels.

integer

textStyle

Card text style.

string

title

Title color as a hex color code.

string (hex color code)

titleSize

Title size, in pixels.

integer

titleStyle

Title style.

string

Code sample

var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Card",
                    "cardImage": {
                        "src": "https://via.placeholder.com/400x200",
                        "position": "top"
                    },
                    "columnSet": {
                        "spaceAround": [10, 0, 0, 0],
                        "columns": [{
                                "type": "Column",
                                "width": 10,
                                "items": [{
                                        "type": "Heading",
                                        "text": "Payment Details",
                                        "level": 3,
                                        "context": {
                                            "textAlign": "left"
                                        }
                                    }, {
                                        "type": "ColumnSet",
                                        "spaceAround": [5, 5, 5, 5],
                                        "columns": [{
                                                "type": "Column",
                                                "width": 8,
                                                "items": [{
                                                        "type": "Paragraph",
                                                        "text": "Gates Foundation"
                                                    }, {
                                                        "type": "Paragraph",
                                                        "text": "XXXX-XXXX-XXXX-1268"
                                                    }, {
                                                        "type": "ColumnSet",
                                                        "columns": [{
                                                                "type": "Column",
                                                                "width": 6,
                                                                "items": [{
                                                                        "type": "Paragraph",
                                                                        "text": "01/19"
                                                                    }
                                                                ]

                                                            }, {
                                                                "type": "Column",
                                                                "width": 6,
                                                                "items": [{
                                                                        "type": "Paragraph",
                                                                        "text": "555"
                                                                    }
                                                                ]
                                                            }
                                                        ]
                                                    }

                                                ]
                                            }, {
                                                "type": "Column",
                                                "width": 4,
                                                "align": "top",
                                                "items": [{
                                                        "type": "Image",
                                                        "src": ["https://via.placeholder.com/60"],
                                                        "size": {
                                                            "width": 60,
                                                            "height": 60
                                                        }
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }, {
                                "type": "Column",
                                "width": 2,
                                "align": "middle",
                                "items": [{
                                        "type": "Paragraph",
                                        "text": "lorrel ipsum lorrel "
                                    }
                                ]
                            }
                        ]
                    }
                }
            }
        }
    ]
}
ar obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Card",
                    "cardTitle": "Card title",
                    "cardSubTitle": "Card subtitle",
                    "cardText": "lorrel ipsum lorrel ipsum lorrel",
                    "header": "This is header",
                    "cardButtons": [{
                            "type": "Button",
                            "id": "button10",
                            "context": "secondary",
                            "text": "Cancel"
                        }, {
                            "type": "ToggleButton",
                            "id": "button11",
                            "context": "secondary",
                            "text": "Cancel",
                            "event": {
                                "name": "eventtoggle"
                            }
                        }
                    ]
                }
            }
        }
    ]
}
var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Card",
                    "cardText": "lorrel ipsum lorrel ipsum lorrel",
                    "cardImage": {
                        "src": "https://via.placeholder.com/200x400",
                        "position": "left",
                        "width": 120,
                        "height": 200
                    },
                    "cardButtons": [{
                            "type": "Button",
                            "id": "button10",
                            "context": "secondary",
                            "text": "Cancel"
                        }, {
                            "type": "ToggleButton",
                            "id": "button11",
                            "context": "secondary",
                            "text": "Cancel",
                            "event": {
                                "name": "eventtoggle"
                            }
                        }
                    ]
                }
            }
        }
    ]
}{
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Card",
                    "cardText": "lorrel ipsum lorrel ipsum lorrel",
                    "cardImage": {
                        "src": "https://via.placeholder.com/100",
                        "position": "left",
                        "width": 60,
                        "height": 60,
                        "align": "center",
                        "spaceAround": true
                    },
                    "cardButtons": [{
                            "type": "Button",
                            "id": "button10",
                            "context": "secondary",
                            "text": "Cancel"
                        }, {
                            "type": "ToggleButton",
                            "id": "button11",
                            "context": "secondary",
                            "text": "Cancel",
                            "event": {
                                "name": "eventtoggle"
                            }
                        }
                    ]
                }
            }
        }
    ]
}
 var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Card",
                    "cardTitle": "Card title",
                    "cardSubTitle": "Card subtitle",
                    "cardText": "lorrel ipsum lorrel ipsum lorrel", ,
                    "cardImage": {
                        "src": "https://via.placeholder.com/400x200",
                        "position": "top"
                    },
                    "cardButtons": [{
                            "type": "Button",
                            "id": "button10",
                            "context": "secondary",
                            "text": "Cancel"
                        }, {
                            "type": "ToggleButton",
                            "id": "button11",
                            "context": "secondary",
                            "text": "Cancel",
                            "event": {
                                "name": "eventtoggle"
                            }
                        }
                    ]
                }
            }
        }
    ]
}
var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Card",
                    "size": 200,
                    "cardTitle": "Card title",
                    "cardSubtitle": "Card subtitle",
                    "context": {
                        "cardBorder": "#C0C0C0"
                    },
                    "cardText": "lorrel ipsum lorrel ipsum lorrel",
                    "cardImage": {
                        "src": "https://via.placeholder.com/100",
                        "position": "top",
                        "spaceAround": true,
                        "height": 60,
                        "width": 120,
                        "align": "center"

                    },
                    "cardButtons": [{
                            "type": "Button",
                            "id": "button10",
                            "context": "secondary",
                            "text": "Submit"
                        }, {
                            "type": "ToggleButton",
                            "id": "button11",
                            "context": "secondary",
                            "text": "Cancel",
                            "event": {
                                "name": "eventtoggle"
                            }
                        }
                    ]
                }
            }
        }
    ]
}
var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Card",
                    "cardText": "lorrel ipsum lorrel ipsum lorrel",
                    "listGroup": {
                        "items": ["satisfactory", "excellent"],
                        "id": "list2"
                    },
                    "cardImage": {
                        "src": "https://via.placeholder.com/400x200",
                        "position": "top"
                    },
                    "cardButtons": [{
                            "type": "Button",
                            "id": "button10",
                            "context": "secondary",
                            "text": "Cancel"
                        }, {
                            "type": "ToggleButton",
                            "id": "button11",
                            "context": "secondary",
                            "text": "Cancel",
                            "event": {
                                "name": "eventtoggle"
                            }
                        }
                    ]
                }
            }
        }
    ]
}
var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Card",
                    "cardTitle": "Card title",
                    "cardSubTitle": "Card subtitle",
                    "cardText": "lorrel ipsum lorrel ipsum lorrel",
                    "cardImage": {
                        "src": "https://via.placeholder.com/400x200",
                        "position": "overlay"
                    }
                }
            }
        }
    ]
}