Use the Card Designer

Now let’s look at how to add, remove, and modify elements from your Now Card.

You can navigate to the Designer from the directory your Card is stored in. As per the previous article, this will be spaces/global/components. Find the .card file, and click the "Designer" link to the right.

Card Designer Button

This will take you to 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:

Card Designer Interface


This tab lets you view and modify the elements that make up your Card. If you followed the last tutorial, you'll have a Card Title, and a Liquid View element.

The Card Title will automatically take the name of the Card you specified when you created the Card component. The Liquid View lets you use HTML and Liquid to display and layout data in a custom fashion.

For a full guide on Liquid, please see our Liquid documentation.

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

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.


This tab shows you an editor, with which you can modify the raw JSON content of the .card definition.


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.


This tabs shows you a preview of how your Card will display in the Now Assistant app. It uses the preview data specified 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 used.

Got an issue? Or want to submit feedback?
Submit your feedback

Our new Feedback and Issue Tracker is built on GitHub Issues. Just leave your comment below and you can track our team resolve it, or browse issues others have already submitted.

Read how to use the Feedback and Issue Tracker