# Top Nav Mega Menu Featured Card

## Usage

Standard featured card for the `TopNavMegaMenu` featured slot. Provides a consistent card with optional image, title, description, and CTA link.

```vue
<script setup lang="ts">
import { TopNavMegaMenuFeaturedCard } from '@astryx-vue/core/TopNav'
</script>

<template>
  <TopNavMegaMenuFeaturedCard
    title="What's New"
    description="Check out the latest features and improvements in the Q2 release."
    link-label="Read the changelog"
    link-href="#changelog"
  />
</template>
```

`title` is required. `image` renders above the body; without `imageAlt` the image stays decorative, which is usually right because the card already carries a visible title. `linkLabel` and `linkHref` add the action at the bottom of the card, and `linkHref` falls back to `href`. Pass `href` without `linkLabel` to make the whole card one link. Text in the default slot lands under the description.

## Examples

### TopNavMegaMenuFeaturedCard — Basic

A promotional card with a title, description, and call-to-action link. Pass it to the featured slot of a TopNavMegaMenu to highlight announcements.

```vue
<script setup lang="ts">
import { TopNavMegaMenuFeaturedCard } from '@astryx-vue/core/TopNav'
</script>

<template>
  <TopNavMegaMenuFeaturedCard
    title="What's New"
    description="Check out the latest features and improvements in the Q2 release."
    link-label="Read the changelog"
    link-href="#changelog"
  />
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | — | Card title. Required. |
| `description` | `string` | — | Description text below the title. |
| `href` | `string` | — | Makes the whole card a link. With `linkLabel`, the link moves to the CTA at the bottom instead. |
| `image` | `string` | — | Optional image URL displayed above the body. |
| `imageAlt` | `string` | — | Alt text for the image. When omitted, the image is explicitly decorative (`alt=""`, `role="presentation"`, `aria-hidden`), usually correct since the card already has a visible title. Provide it only when the image conveys information beyond the title and description. |
| `linkLabel` | `string` | — | CTA link text, rendered at the bottom of the card. Needs `linkHref` or `href`. |
| `linkHref` | `string` | — | CTA link URL. Falls back to `href`. |
| `as` | `NavLinkComponent` | `'a'` | Link root used by the card and the CTA. Only used when there is a URL. |

## Slots

- `default`: custom content rendered below the standard body.