nuxt-x-affiliate
Listing Card
One directory entry as a grid tile, a wide row, or a dense compact line.
Listing Card
One directory entry. Three layouts: card for a grid tile, row for a wide list
item, compact for a dense list.
Usually rendered for you by <XAFListingGrid>; use it directly when you want to
control the surrounding layout.
Components
<XAFListingCard />
<XAFListingCard :listing="listing" layout="card" />
<XAFListingCard :listing="listing" layout="row" />
<XAFListingCard :listing="listing" layout="compact" :show-tags="false" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
listing | DirectoryListing | required | The entry to render |
layout | 'card' | 'row' | 'compact' | 'card' | Visual density |
showRating | boolean | true | Show the star rating |
showTags | boolean | true | Show tag badges |
showBadge | boolean | true | Show the Featured / Sponsored / New badge |
DirectoryListing object
| Key | Type | Description |
|---|---|---|
name | string | Listing name. Its first letter becomes the fallback monogram |
description | string | Short blurb |
category | string | Single category, matched exactly by the grid's filter |
tags | string[] | Tag badges — 4 shown in card, 2 in row |
logo | string | Logo URL |
rating | number | 0–5, rendered by <XAFStarRating> |
reviewCount | number | Shown beside the rating |
badge | string | Featured / Sponsored / New, or any label |
to | string | Destination for the card's CTA |
ctaLabel | string | CTA text. Default: "View listing" |
Tips
- A
Sponsoredbadge renders even whenshowBadgeisfalse. It is a paid-placement disclosure, not decoration — suppressing it while still ranking the listing is the undisclosed material connection the FTC Endorsement Guides prohibit. - Ratings go through
<XAFStarRating>, so half-stars work. The marketing original comparedi <= Math.round(rating), which painted 4.5 as five full stars.
AI Context
component: XAFListingCard
package: "@xenterprises/nuxt-x-affiliate"
use-when: One directory entry, in a grid tile, row, or compact line