---
metaTitle: Action Card component | AwesCode UI
meta:
  - name: description
    content: The <AwActionCard /> component is used to render Action Card - UI Vue component for AwesCode UI.
title: Action Card
---

# Action Card

**Category:** Atom | **Import:** Global

The `AwActionCard` component is a card-like container with a title, optional description, and action button or link.

## Overview

`AwActionCard` provides a structured card layout with a header section containing a title and description, optional action button, and a content area. It can be used as a clickable card (with `href`) or with a custom action button.

## Usage

### Basic Example

```markup
<AwActionCard
    title="Simple Action Card"
    description="This is a basic action card with a title and description"
/>
```

### With Action Button

```markup
<AwActionCard
    title="Card with Action"
    description="Click the button to trigger an action"
    :action="{ text: 'Click Me', color: 'mono-dark' }"
    @action="onAction"
/>
```

### With Link

```markup
<AwActionCard
    title="Clickable Card"
    description="This entire card is clickable"
    href="/components"
/>
```

### With Content Slot

```markup
<AwActionCard
    title="Card with Body"
    description="This card includes additional body content"
    :action="{ text: 'Save', color: 'accent' }"
>
    <AwActionCardBody title="Details">
        <AwDescription>You can add any content inside the action card.</AwDescription>
        <AwList>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </AwList>
    </AwActionCardBody>
</AwActionCard>
```

### With Custom Slots

```markup
<AwActionCard
    title="Custom Card"
    description="This card uses custom slots for before and after title"
>
    <template #before-title>
        <AwActionIcon icon="awesio/check" size="sm" />
    </template>

    <template #after-title>
        <AwButton text="Custom Action" color="accent" size="sm" />
    </template>

    <AwActionCardBody>
        <AwDescription>Custom slot content with icon before title and custom button after.</AwDescription>
    </AwActionCardBody>
</AwActionCard>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| title | Card title text | `String` | `false` | `''` |
| description | Card description text | `String` | `false` | `''` |
| fullTitle | Whether to show full title without truncation | `Boolean` | `false` | `false` |
| action | Action button configuration object | `Object` | `false` | `null` |
| href | Link destination (makes card clickable) | `String` / `Object` | `false` | `null` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Main card content | - | - |
| before-title | Content before the title | - | - |
| after-title | Content after the title (replaces action button if provided) | - | - |
| description | Custom description content | - | Default description text |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| action | - | Emitted when action button is clicked |

## Related Components

- `AwActionCardBody` - Body component for card content
- `AwActionIcon` - Icon component for action cards
- `AwCard` - Basic card component

## Notes

- **Import Method:** Global - Available as atom component
- When `href` is provided, the entire card becomes clickable
- Action button is only shown when `action` prop is provided and `href` is not set
- Use `AwActionCardBody` for structured content within the card