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

# Card

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

The `AwCard` component is a flexible container with optional header, title, description, and content sections.

## Overview

`AwCard` provides a structured card container with an optional header section containing title, description, and badge. It's a fundamental building block for displaying grouped content.

## Usage

### Basic Example

```markup
<AwCard>
    <AwDescription tag="div">Card content</AwDescription>
</AwCard>
```

### With Title

```markup
<AwCard title="Card Title">
    <AwDescription tag="div">Card content</AwDescription>
</AwCard>
```

### With Title and Description

```markup
<AwCard
    title="Card Title"
    description="Card description text"
>
    <AwDescription tag="div">Card content</AwDescription>
</AwCard>
```

### With Badge

```markup
<AwCard title="Featured Card">
    <template #badge>
        <AwBadge text="New" color="info" />
    </template>
    <AwDescription tag="div">Card content</AwDescription>
</AwCard>
```

### Custom Header

```markup
<AwCard>
    <template #header>
        <AwFlow class="pb-2 mb-2 border-b">
            <AwActionIcon icon="awesio/settings" size="sm" />
            <AwDescription>Custom header content</AwDescription>
        </AwFlow>
    </template>
    <AwDescription tag="div">Card content</AwDescription>
</AwCard>
```

### Custom Title Slot

```markup
<AwCard>
    <template #title>
        <AwFlow :gap="1">
            <AwActionIcon icon="awesio/check" size="xs" color="success" />
            <strong>Custom Title with Icon</strong>
        </AwFlow>
    </template>
    <template #badge>
        <AwBadge text="3" color="error" />
    </template>
    <AwDescription tag="div">Card content</AwDescription>
</AwCard>
```

### Custom Tag

```markup
<AwCard tag="article" title="Article Title">
    <AwDescription tag="div">Article content</AwDescription>
</AwCard>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| tag | HTML tag for card element | `String` | `false` | `'div'` |
| titleTag | HTML tag for title | `String` | `false` | `'h3'` |
| title | Card title text | `String` | `false` | `''` |
| description | Card description text | `String` | `false` | `''` |

All standard HTML attributes are supported via `$attrs`.

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Main card content | - | - |
| header | Custom header (replaces default header) | - | Default header with title/description |
| title | Custom title content | - | Title text |
| description | Custom description content | - | Description text |
| badge | Badge content in header | - | - |

### Events

No events are emitted by this component.

## Related Components

- `AwActionCard` - Card with action button
- `AwDescription` - Description component used in cards
- `AwBadge` - Badge component for card headers

## Notes

- **Import Method:** Global - Available as atom component
- Header is automatically shown when title, title slot, or badge slot is provided
- Description uses `AwDescription` component internally
- Header has offset styling when content is present
- Use for grouping related content with consistent styling