nuxt-x-marketing

Features

Flexible feature showcase component supporting grid, list, and alternating image/text layouts with staggered entrance animations.

Features

XMarkFeatures renders a collection of product features in one of three layout modes. Each feature item can carry an icon, an image, a title, a description, and an optional "learn more" link. Staggered xFadeUp animations are applied automatically via useScrollReveal().

Components

`<XMarkFeatures />`

Choose layout="grid" for a compact icon-card grid, layout="list" for a horizontal icon + text layout, or layout="alternating" for full-width image/text pairs that alternate sides with each entry.

<XMarkFeatures
  layout="grid"
  :columns="3"
  :features="[
    {
      icon: 'i-lucide-zap',
      title: 'Lightning Fast',
      description: 'Sub-second response times powered by edge computing.',
      link: '/features/performance',
    },
    {
      icon: 'i-lucide-shield-check',
      title: 'Secure by Default',
      description: 'End-to-end encryption and SOC 2 Type II certified.',
      link: { to: '/features/security', label: 'Learn about security' },
    },
    {
      icon: 'i-lucide-layers',
      title: 'Fully Customizable',
      description: 'Adapt every component to your brand with a single config file.',
    },
  ]"
/>

Props

Prop	Type	Default	Description
`features`	`Array`	3 example features	Feature items `[{ icon?, title, description?, img?: { src, alt? }, link? }]`
`layout`	`String`	`'grid'`	Display mode: `'grid'`, `'list'`, `'alternating'`
`columns`	`Number`	`3`	Grid columns (grid layout only): `2`, `3`, `4`

Feature item shape

Key	Type	Description
`icon`	`String`	Lucide icon name (e.g. `'i-lucide-zap'`)
`title`	`String`	Feature name
`description`	`String`	Short feature description
`img`	`Object`	Image object `{ src, alt? }` — shown instead of icon in grid mode, alongside text in alternating mode
`link`	`String \| Object`	URL string or `{ to, label?, target? }` — renders a "learn more" link

AI Context

category: Features
package: "@xenterprises/nuxt-x-marketing"
components:
  - XMarkFeatures
use-when: >
  Showcasing product capabilities, benefits, or differentiators on a
  landing or features page. Use grid for compact overviews, alternating
  for deeper feature storytelling with visuals.
typical-page-section: Middle of landing page, after the hero and before pricing.

Edit this pageorReport an issue

Layout

Site-wide layout components including a sticky transparent navbar, full-featured footer, compact legal footer, and dismissible announcement bar.

Pricing

Pricing components for displaying tiered plans and a feature comparison table, both with optional social proof badges and billing period toggle.