# XWUICard

A surface container that assembles an optional cover image, header (icon, title, subtitle, optional badge), body, and a tag/footer row into one card. Pick a look with the `variant` option (`default`, `outlined`, `elevated`, `filled`), set `padding` (`none`/`sm`/`md`/`lg`), and turn on `hoverable` or `clickable` (the latter adds `role="button"`, keyboard activation, and an `onClick` handler). Content can be passed as data props (`title`/`body`/`tags`) or slotted as child markup; `tagsPosition` chooses whether tags sit in the footer or inline in the header.

## Basic Usage

A simple card built from a title, subtitle, and body text.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Content card with a title, subtitle, and body text.
```

## Media Card

A cover image above a title, body copy, and a footer action row.

```example
file: examples/MediaCard.ts
html: examples/MediaCard.html
title: Media Card
description: Image cover with title, body, and actions.
```

## Stats Card

A compact KPI card pairing a big metric with a colored period-over-period delta.

```example
file: examples/StatsCard.ts
html: examples/StatsCard.html
title: Stats Card
description: KPI metric card with a signed delta.
```

## Profile Card

An avatar, name, and meta with follow/message actions and skill tags in the footer.

```example
file: examples/ProfileCard.ts
html: examples/ProfileCard.html
title: Profile Card
description: Avatar, name, meta, and actions.
```

## Pricing Card

A plan card with price, a checkmark feature list, and a full-width call-to-action.

```example
file: examples/PricingCard.ts
html: examples/PricingCard.html
title: Pricing Card
description: Plan/price card with feature list and CTA.
```

```api
```