# XWUICardContact

A CRM-grade contact card combining a circular avatar (auto-initials when no image URL), an identity block - name, `title · company · department` sub-line, a status badge (`active`, `vip`, `hot`, `warm`, `cold`, `inactive`, `churned`, `prospect`), an optional free-form badge, and a colour-coded lead score (0-100) - with clickable contact methods (email/phone/mobile/LinkedIn/Twitter/website/address, each auto-deriving an `href`), tag chips, a last-activity line, and a row of icon-button quick actions. Pick `horizontal`, `vertical`, or `inline` layouts in `sm`/`md`/`lg` sizes; use it for contact lists, account detail headers, lead rows, and mention previews.

## Basic Usage

The minimal card - just a `name`, with the avatar falling back to auto-generated initials.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Minimal contact card built from a name only.
```

## Full

A fully populated card with avatar, title/company/department, status, lead score, contact methods, tags, quick actions, and a last-activity line.

```example
file: examples/Full.ts
html: examples/Full.html
title: Full
description: A fully populated card with avatar, contact methods, tags, and quick actions.
```

## Inline

The compact `inline` layout at `sm` size, suited to a list row or mention preview.

```example
file: examples/Inline.ts
html: examples/Inline.html
title: Inline
description: Compact inline layout for a list row or mention preview.
```

## Status States

Six `status` values - active, vip, hot, warm, cold, churned - each rendering a badge in its mapped semantic colour.

```example
file: examples/StatusStates.ts
html: examples/StatusStates.html
title: Status States
description: active / vip / hot / warm / cold / churned, each mapped to a semantic tone.
```

```api
```