The Card Designer can be opened with
.card files that are part of any Card component under Spaces → Global → Components.
.card file, and click the "Designer" link to the right.
This will load the file in the Card Designer, as shown below.
Along the top you’ll notice the
Save button and then the Designer's tabs. These are as follows:
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.
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.
default.test.jsonfile that's in your components folder. You can paste sample JSON from your API in there to test the basic interactions of your design.
This tabs shows you a preview of how your Card will display in the Now Assistant app. It uses the preview data that has been selected in the Settings tab.
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.