Card design schema

Definition of the JSON object that allows the creation and customization of the cards.

To create a card, you can use the different ElementTypes, which have their own configuration properties but all of them inherit the properties of the Element model.

Additionally, in the design of the JSON object, the following features can be used:

• Contextual variables
• Settings variables
• Eval

Interface

interface ICardDesign extends IElement {
  body: IElement[];
  dataAutomationId?: string;
  horizontalSeparatorHeight?: string;
  verticalSeparatorWidth?: string;
}

Example

{
  "type": "Card",
  "body": [
    {
      "type": "Container",
      "onClick": {
        "type": "OpenUrl",
        "url": "{base.urls.detailUrl}"
      },
      "items": [
        {
          "type": "Image",
          "url": "{base.image.preview}"
        },
        {
          "type": "TextBlock",
          "text": "{base.category.text}",
          "style": {
            "fontSize": "13px"
          }
        }
      ]
    }
  ]
}

Properties

type

Specifies the type of element to display. In this case must be “Card”

• Type: "Card"

• Required: Yes

body

The card elements to show in the primary card region.

• Type: IElement[]

• Required: Yes

horizontalSeparatorHeight

Horizontal spacing height between card elements.

• Type: string

• Required: No

• Default value: 8px

verticalSeparatorWidth

Vertical spacing width between card elements.

• Type: string

• Required: No

• Default value: 6px

dataAutomationId

Attribute to find the card on a page.

• Type: string

• Required: No