---
metaTitle: PreviewCard component | AwesCode UI
meta:
  - name: description
    content: The <AwPreviewCard /> component displays content preview cards - UI Vue component for AwesCode UI.
title: PreviewCard
---

# AwPreviewCard

**Category:** Organism | **Import:** Dynamic

The `AwPreviewCard` component displays content previews with image, title, and description in a card format.

## Usage

```markup
<AwPreviewCard
  :image="article.cover"
  :title="article.title"
  :description="article.excerpt"
  :href="`/articles/${article.id}`"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| image | Preview image URL | `String` | `false` | `''` |
| title | Card title | `String` | `false` | `''` |
| description | Card description | `String` | `false` | `''` |
| href | Link URL | `String` | `false` | `''` |

## Related Components

- [AwCard](aw-card.md) - Base card component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as organism
- Optimized for content previews
- Clickable when href provided