nuxt-x-marketing
DirectoryListingCard
Single directory listing in card, row, or compact layout with logo, name, category, tags, star rating, and badge.
DirectoryListingCard
Renders a single listing in one of three layouts: card (vertical with image), row (horizontal compact), or compact (single-line, for sidebar widgets or "similar listings").
Components
<XMarkDirectoryListingCard />
<XMarkDirectoryListingCard
:listing="{
name: 'Linear',
description: 'The issue tracking tool you will actually enjoy using.',
logo: '/logos/linear.png',
category: 'Project Management',
tags: ['Productivity', 'Team', 'Agile'],
rating: 4.8,
reviewCount: 1240,
badge: 'Featured',
to: '/listing/linear',
ctaLabel: 'View Listing',
}"
layout="card"
:show-rating="true"
:show-tags="true"
:show-badge="true"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
listing | object | Example listing | Listing object { name, description?, logo?, category?, tags?, rating?, reviewCount?, badge?, to?, ctaLabel? }. |
layout | string | 'card' | Display variant: 'card', 'row', 'compact'. |
showRating | boolean | true | Show star rating. |
showTags | boolean | true | Show tag badges (max 4 in card, 2 in row). |
showBadge | boolean | true | Show badge (Featured, Sponsored, New — color is auto-selected by badge text). |
Listing shape
| Key | Type | Description |
|---|---|---|
name | string | Listing name. |
description | string | Short description (truncated to 2 lines). |
logo | string | Logo image URL. |
category | string | Category label. |
tags | string[] | Tag list. |
rating | number | Numeric rating 0–5. |
reviewCount | number | Number of reviews. |
badge | string | Badge text (e.g. Featured, Sponsored, New). |
to | string | Destination URL for the CTA button. |
ctaLabel | string | CTA button label. Defaults to 'View Listing'. |
AI Context
category: Directory
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkDirectoryListingCard
use-when: >
Rendering individual listing cards in a directory. Typically composed
inside XMarkDirectoryListingGrid, but can also be used standalone for
featured listing sections or "similar listings" widgets.
typical-page-section: Directory index grid, category pages, sidebar widgets.