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>
footer
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>
header
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.
align-content
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.
icon-position
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
show-if
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
​
​

capture-signature

accent

Last modified 6mo ago

card

Overview

Basic Example

Standard Attributes

`content`

Example: Shorthand syntax

Example: Longhand syntax

`footer`

Example: Shorthand syntax

Example: Longhand syntax

`header`

Example: Shorthand syntax

Example: Longhand syntax

Advanced Attributes

`align-content`

`icon`

`icon-color`

`icon-position`

`on-press`

`show-if` and `hide-if`

`validate`