Using the Card Designer

3. Add Elements to a Card


This tab lets you view and modify the elements that make up your Card.

If your Card has a Card Title element this will automatically show the name of the Card you specified in the metadata on the live site.

To remove an element from the Card, you can click the "Remove" button at the bottom of the page.

For a full list and description of all Card Elements and their properties, please see Add Elements.

Add Elements

This tab gives you a list of elements on the left, and a preview of your Card on the right. You can add new elements to the card by clicking and dragging the item from the list, to the preview on the right. You can place it before or after any other item on the Card, by adjusting where you drop the element.

Once added, you will see a preview of the elements layout.

Each Element has separate options, explore them below:


This tab shows the configuration of the .card file that’s currently opened in the Card Designer as a JSON schema. Click into the editor and hit Esc to open the editor in full screen.


The Settings tab allows you to modify where the Card is getting it's data from. Any settings you apply here will apply to the card Preview.

Preview Mode
_Live data_ takes data from the Connector that's defined in the metadata.
_Static data_ takes data from the `default.test.json` file that's in your components folder. You can paste sample JSON from your API in there to test the basic interactions of your design.
Preview Container
_Search (reactive card)_ is the container used for Cards that show a specific search result that gets requested from an API.
_Event (proactive card)_ is the standard Card container for Cards that show items from sent from an API.
_Item (embedded card)_ is the standard Card container for Cards that are embedded into other webpages.
Preview Card Definition
Here you select the metadata content item for your Card. If you created your card from a template this should already show a value.
Search term
_For Search preview container only._ Enter a sample search query that should be requested from the Connector when showing the Card Preview.
Preview Service Url
_For Item preview container only._ Enter the URL where your Card will be embedded and it will show accordingly in the Preview pane.
Preview Data
Shows you either the live data delivered by the API or the sample data from your test .json file. Click into the container and then hit Esc to open it full screen.


This tabs shows you a preview of how your Card will display in the Digital Assistant app. It uses the preview data that has been selected in the Settings tab.

Mobile Preview

This tab also shows a preview of your Card, but here it shows the Card as it appears on a mobile device with certain responsive classes showing, if those are used in your Card.