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-ifhide-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