card
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.
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>

Optional
Default: unset
Shorthand supported?
true
Text that is displayed in the content position of the
card
.<card content="John Smith">
...
</card>
<card>
<content>John Smith</content>
<!-- or -->
<content>{formatString}</content>
<!-- or -->
<content value="John Smith" />
</card>
Optional
Default: unset
Shorthand supported?
true
Text that is displayed in the footer position of the
card
.<card footer="Click to view more information about the user">
...
</card>
<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
Default: unset
Shorthand supported?
true
Text that is displayed in the header position of the
list-item
.<card header="User details">
...
</card>
<card>
<header>User details</header>
<!-- or -->
<header>{formatString}</header>
<!-- or -->
<header value="User details" />
</card>
Version compatibility
align-content
was introduced in version 4.87.0 of the JourneyApps Runtime.Version compatibility
icon
(this shorthand version) was introduced in version 4.87.0 of the JourneyApps Runtime.A shorthand attribute. See
action
> icon
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 valueDefault: unset
Specify the color of the
icon
. Version compatibility
icon-position
was introduced in version 4.87.0 of the JourneyApps Runtime.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
Version compatibility
validate
(this shorthand version) was introduced in version 4.87.0 of the JourneyApps Runtime.A shorthand attribute. See
action
> validate
Last modified 6mo ago