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 />
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").
<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',
}"
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 |
showBadge | Boolean | true | Show badge (Featured, Sponsored, New) |
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.