# action

## Overview

`card` supports the `action` attribute, making it clickable.

## Standard Attributes

### `on-press`

**Required**

**Default**: unset

**Shorthand supported?** `true`

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

{% hint style="info" %}
If used in an `object-repeat`, the `on-press` function takes the variable declared in the 'as' parameter.
{% endhint %}

#### Example: Shorthand syntax

```xml
<card on-press="$:doSomething()">
    ...
</card>
```

#### Example: Longhand syntax

```xml
<card>
    <action on-press="$:doSomething()" />
</list>
```

## Advanced Attributes

### `icon`

**Optional**

**Type**: `string`

**Default**: unset

**Shorthand supported?** `true`

The icon to display on the right-hand side of the `card`. The icon can be a one of JourneyApps' supported icons.

#### Example: Shorthand syntax

```xml
<card icon="fa-bars">
    ...
</card>
```

#### Example: Longhand syntax

```xml
<card>
    <action icon="fa-bars" on-press="$:doSomething()" />
</list>
```

### `validate`

**Optional**

**Type**: `boolean`

**Default**: `false`

**Shorthand supported?** `false`

Whether to run field validation before calling the associated `on-press` (see above). Can be either `true`, `false`, or the result of a function, e.g. `$:shouldBeValidated()`.

```xml
<card>
    <action icon="fa-bars" on-press="$:doSomething()" validate="true" />
</list>
```