asset

Overview

The asset element adds visual content such as images or icons to a list-item.

Standard Attributes

icon

Optional

Type: string

Default: unset

Shorthand supported? true

The icon to display on the left-hand side of the list-item. The icon can be a one of JourneyApps' supported icons. To display an image or photo, use the src="" attribute.

Example: Shorthand syntax

<list>
    <list-item icon="my-icon-name" />
</list>

Example: Longhand syntax

<list>
    <list-item>
        <asset icon="my-icon-name" />
    </list-item>
</list>

Advanced Attributes

color

Optional

Type: string- can be a named color or #HEX value

Default: unset

Shorthand supported? false

The color of the icon.

<list>
    <list-item>
        <asset icon="my-icon-name" color="#FF5733" />
    </list-item>
</list>

src

Optional

Type: string

Default: unset

Shorthand supported? true

The photo or image to display on the left-hand side of the list-item. The photo or image can be a png or SVG file, and can referenced from a database object or your app's assets. To display an icon, use the icon="" attribute.

Example: Shorthand syntax

<list>
    <list-item image="{formatString}" />
</list>

Example: Longhand syntax

<list>
    <list-item>
        <asset src="{formatString}" />
        <!-- or -->
        <asset src="{dbObject.photo}" /> <!-- Supported from v4.31 of the JourneyApps Container -->
    </list-item>
</list>