# XWUICardFeature

A marketing/feature card that stacks an optional icon, a corner `tag`, a title, a description, and an optional `linkLabel`/`linkHref` call-to-action - built for landing-page feature grids and product highlight sections. The `variant` option (`default`, `outlined`, `elevated`, `ghost`) sets the surface style, `accent` (`brand`, `accent`, `success`, `warning`, `danger`, `none`) tints the icon container, and `size` (`sm`/`md`/`lg`) and `hoverable` round out the presentation. Links to absolute `http(s)` URLs automatically open in a new tab with `rel="noreferrer noopener"`.

## Basic Usage

The minimal feature card: just a title and a description.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Minimal feature card with only a title and description.
```

## Accents

The same icon card repeated across the brand, accent, success, warning, and danger gradient washes.

```example
file: examples/Accents.ts
html: examples/Accents.html
title: Accents
description: Icon-container gradient washes for brand, accent, success, warning, and danger.
```

## Variants

The default, outlined, elevated, and ghost surface styles shown side by side.

```example
file: examples/Variants.ts
html: examples/Variants.html
title: Variants
description: Default, outlined, elevated, and ghost variants side by side.
```

## With Icon And Link

A full marketing card combining an SVG icon, title, description, and a "Learn more" link.

```example
file: examples/WithIconAndLink.ts
html: examples/WithIconAndLink.html
title: With Icon And Link
description: Icon, title, description, and a "Learn more" call-to-action link.
```

## With Tag

An elevated card with a "Beta" corner tag and a "Read the spec" link.

```example
file: examples/WithTag.ts
html: examples/WithTag.html
title: With Tag
description: Corner tag for "New" / "Beta" / "Pro" badges alongside a link.
```

```api
```