Links

card

Overview

card is most typically a stand-alone component that displays content about a single topic.
Version compatibility
  • card was introduced in version 4.21.0 of the JourneyApps Container.
  • It received several functional updates in version 4.87.0 of the JourneyApps Runtime, most notably the addition of advanced styling and configuration capabilities.
To link cards to queries and objects, use object-repeat.
Alternatively, use the list UI component.

Basic Example

main.view.xml
<var name="timestamp" type="text" />
<var name="user" type="user" />
<card>
<header>New Job Available</header>
<content>Click here to see details</content>
<footer>Submitted @ {timestamp} by {user.first_name} {user.last_name}</footer>
<accent label="Open" color="positive" />
<action on-press="$:displayDetails()" icon="fa-ellipsis-h" />
</card>

Standard Attributes

content

Optional
Type: string (static text, a format string or the return value of a JS/TS function)
Default: unset
Shorthand supported? true
Text that is displayed in the content position of the card.

Example: Shorthand syntax

<card content="John Smith">
...
</card>

Example: Longhand syntax

<card>
<content>John Smith</content>
<!-- or -->
<content>{formatString}</content>
<!-- or -->
<content value="John Smith" />
</card>
Optional
Type: string (static text, a format string or the return value of a JS/TS function)
Default: unset
Shorthand supported? true
Text that is displayed in the footer position of the card.

Example: Shorthand syntax

<card footer="Click to view more information about the user">
...
</card>

Example: Longhand syntax

<card>
<footer>Click to view more information about the user</footer>
<!-- or -->
<footer>{formatString}</footer>
<!-- or -->
<footer value="Click to view more information about the user" />
</card>
Optional
Type: string (static text, a format string or the return value of a JS/TS function)
Default: unset
Shorthand supported? true
Text that is displayed in the header position of the list-item.

Example: Shorthand syntax

<card header="User details">
...
</card>

Example: Longhand syntax

<card>
<header>User details</header>
<!-- or -->
<header>{formatString}</header>
<!-- or -->
<header value="User details" />
</card>

Advanced Attributes

align-content

Version compatibility
align-content was introduced in version 4.87.0 of the JourneyApps Runtime.

icon

Version compatibility
icon (this shorthand version) was introduced in version 4.87.0 of the JourneyApps Runtime.
A shorthand attribute. See action > icon

icon-color

Version compatibility
icon-color was introduced in version 4.87.0 of the JourneyApps Runtime.
Optional
Type: string - can be a named color or #HEX value
Default: unset
Specify the color of the icon.

icon-position

Version compatibility
icon-position was introduced in version 4.87.0 of the JourneyApps Runtime.

on-press

Version compatibility
on-press (this shorthand version) was introduced in version 4.87.0 of the JourneyApps Runtime.
A shorthand attribute. See action > on-press

show-if and hide-if

validate

Version compatibility
validate (this shorthand version) was introduced in version 4.87.0 of the JourneyApps Runtime.
A shorthand attribute. See action > validate