# card

## Overview

`card` is most typically a stand-alone component that displays content about a single topic.

{% hint style="info" %}
**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](https://docs.journeyapps.com/reference/build/app-styling-and-customizations/component-styling-and-configuration) capabilities.
  {% endhint %}

{% hint style="success" %}
To link cards to queries and objects, use [`object-repeat`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-repeat).

Alternatively, use the [`list`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/list) UI component.
{% endhint %}

### Basic Example

{% code title="main.view\.xml" %}

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

{% endcode %}

<figure><img src="https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2FGBIfRjJf5GnhKpzJz3kO%2Fcard-example.png?alt=media&#x26;token=35f97119-1a00-4098-af94-9282f6f19a2e" alt=""><figcaption></figcaption></figure>

## Standard Attributes

### `content`

**Optional**

**Type**: `string` (static text, a [format string](https://docs.journeyapps.com/reference/app-features/xml-format-strings) or the return value of a [JS/TS function](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml))

**Default**: unset

**Shorthand supported?** `true`

Text that is displayed in the content position of the `card`.

#### Example: Shorthand syntax

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

#### Example: Longhand syntax

```xml
<card>
    <content>John Smith</content>
    <!-- or -->
    <content>{formatString}</content>
    <!-- or -->
    <content value="John Smith" />
</card>
```

### `footer`

**Optional**

**Type**: `string` (static text, a [format string](https://docs.journeyapps.com/reference/app-features/xml-format-strings) or the return value of a [JS/TS function](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml))

**Default**: unset

**Shorthand supported?** `true`

Text that is displayed in the footer position of the `card`.

#### Example: Shorthand syntax

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

#### Example: Longhand syntax

```xml
<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](https://docs.journeyapps.com/reference/app-features/xml-format-strings) or the return value of a [JS/TS function](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml))

**Default**: unset

**Shorthand supported?** `true`

Text that is displayed in the header position of the `list-item`.

#### Example: Shorthand syntax

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

#### Example: Longhand syntax

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

## Advanced Attributes

### `align-content`

{% hint style="info" %}
**Version compatibility**

`align-content` was introduced in version **4.87.0** of the JourneyApps Runtime.
{% endhint %}

{% content-ref url="../xml-fields/align-content" %}
[align-content](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/align-content)
{% endcontent-ref %}

### `icon`

{% hint style="info" %}
**Version compatibility**

`icon` (this shorthand version) was introduced in version **4.87.0** of the JourneyApps Runtime.
{% endhint %}

A shorthand attribute. See `action` > `icon`

### `icon-color`

{% hint style="info" %}
**Version compatibility**

`icon-color` was introduced in version **4.87.0** of the JourneyApps Runtime.
{% endhint %}

**Optional**

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

**Default**: unset

Specify the color of the `icon`.&#x20;

### `icon-position`

{% hint style="info" %}
**Version compatibility**

`icon-position` was introduced in version **4.87.0** of the JourneyApps Runtime.
{% endhint %}

{% content-ref url="../xml-fields/icon-position" %}
[icon-position](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/icon-position)
{% endcontent-ref %}

### `on-press`

{% hint style="info" %}
**Version compatibility**

`on-press` (this shorthand version) was introduced in version **4.87.0** of the JourneyApps Runtime.
{% endhint %}

A shorthand attribute. See `action` > `on-press`

### `show-if` and `hide-if`

{% content-ref url="../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}

### `validate`

{% hint style="info" %}
**Version compatibility**

`validate` (this shorthand version) was introduced in version **4.87.0** of the JourneyApps Runtime.
{% endhint %}

A shorthand attribute. See `action` > `validate`