nuxt-x-marketing
DirectoryCategoryHero
Dark hero section for directory category pages with icon, name, count, description, and integrated search input.
DirectoryCategoryHero
A dark hero section designed for category landing pages. Shows the category icon, name, item count, and description. Optionally renders an integrated search input that emits the query in real-time.
Components
<XMarkDirectoryCategoryHero />
A dark hero section designed for category landing pages. Shows the category icon, name, item count, and description. Optionally renders an integrated search input that emits the query in real-time.
<XMarkDirectoryCategoryHero
:category="{
name: 'Design Tools',
icon: 'i-lucide-palette',
count: 142,
description: 'Discover the best design tools for UI, UX, and graphic design.',
}"
:has-search="true"
search-placeholder="Search design tools..."
@search="handleSearch"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
category | Object | Default category | Category object { name, icon?, count?, description? } |
hasSearch | Boolean | true | Show integrated search input |
searchPlaceholder | String | 'Search listings...' | Input placeholder text |
Emits
| Event | Payload | Description |
|---|---|---|
search | query: string | Emitted on each keystroke and on Enter |
AI Context
category: Directory
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkDirectoryCategoryHero
use-when: >
Adding a dark hero section to directory category pages with the category
name, icon, listing count, description, and integrated search input.
typical-page-section: Top of directory category pages, above the listing grid.