Using the Card Designer

5. Elements Reference

Below please find a list of all the Elements in the Card Designer:

Dashboard echo

This will show the raw JSON input on the Card for testing purposes.

Dashboard Echo

Liquid List

For Micro apps: Shows lists

Displays a link at the bottom of the Card along with a toggle switch to trigger expansion or collapsing of the Card.

Card Footer

If you enable the 'expandable' attribute users will see a chevron that allows them to reveal more content. Such content should be wrapped inside a <div class="expanded-only"> which will hide the content until the user expands the Card.

Folder Explorer

For Micro apps: Shows a list of documents and folders on a page which can be opened or searched.

Liquid View

Central to showing structured data outputs using Liquid as templating language for formatting and conditions.

Liquid View

Building your Card

Making a Card with the Liquid View element is easy:

  1. Use the Layout templates to lay out the basic structure of your Card.
  2. Start a loop with Liquid, for example if you have an array in your JSON called 'items' you could open the loop with {% for item in items %}.
  3. Place parsing tags within your layout, for example if you want to parse the string value of phone_number you could write {{item.phone_number}} and it will parse all phone numbers from the items in your array.
  4. Close the loop with {% endfor %}.

Please see the Building Cards tutorial to learn how to make completely new Cards for Digital Assistant.


For Micro apps: Allows to integrate whole forms from external sources

Card Title

Shows the name of a Card (as defined in the metadata) along with a contextual drop-down menu that allows for pinning, dismissing, etc.

Card Title

You show additional links in the dropdown menu by clicking the plus icon under the 'links' section.


Allows to read an additional data source in the same Card.


Shows a video file.

Video Card


For Micro apps: Loads data for one record only (for example to show an item in a newsreader)

Entity Resolver

When a search returns more than result, the entity resolver allows the use to filter their selection further until one result can be identified.


Shows a paginated list of items.


Allows for a text input.

For Micro apps: Allows to create a list of links/bookmarks that the user can navigate to.


Input field. See options

Date Element


Not active: Filters or aggregates data.


Input field. See options

Element Date Range

Show a list but entries are shown as a horizontal carousel, rather than a vertical list.


When multiple sections are placed on a Card it creates a tabular interface that allows you to switch between the different sections.

Section Tabs Element

Journey Step

Special element for demo purposes.


Visualizes data as charts.

Line Chart

Uses nvd3 as the library for line charts.

Strudel Chart

Shows data in a single vertical bar.

Strudel Chart Element

Pie Chart

Uses nvd3 library for displaying pie charts.