nuxt-x-marketing

FAQ

Frequently asked questions component with animated accordion and two-column layout modes.

FAQ

XMarkFAQ renders a list of question-and-answer pairs in one of two layouts. The accordion mode animates answer panels open and closed with smooth height transitions. The two-column mode shows all questions in the left column and all answers in the right column — useful for shorter, scannable FAQs.

Components

`<XMarkFAQ />`

<XMarkFAQ
  layout="accordion"
  :open-first="true"
  :allow-multiple="false"
  :items="[
    {
      question: 'Is there a free trial?',
      answer: 'Yes — all plans include a 14-day free trial with no credit card required.',
    },
    {
      question: 'Can I change plans later?',
      answer: 'Absolutely. You can upgrade or downgrade at any time from your account settings.',
    },
    {
      question: 'What payment methods do you accept?',
      answer: 'We accept all major credit cards, PayPal, and bank transfers for annual plans.',
      open: true,
    },
  ]"
/>

Two-column variant for scannable content:

<XMarkFAQ
  layout="two-column"
  :items="faqs"
/>

Props

Prop	Type	Default	Description
`items`	`Array`	1 example item	FAQ items `[{ question, answer, open? }]`
`layout`	`String`	`'accordion'`	Display mode: `'accordion'`, `'two-column'`
`openFirst`	`Boolean`	`false`	Start with the first item expanded
`allowMultiple`	`Boolean`	`false`	Allow more than one item open at a time

Item shape

Key	Type	Description
`question`	`String`	The question text shown in the trigger
`answer`	`String`	The answer text revealed when expanded
`open`	`Boolean`	Start this specific item in an expanded state

AI Context

category: FAQ
package: "@xenterprises/nuxt-x-marketing"
components:
  - XMarkFAQ
use-when: >
  Addressing common customer questions on a landing or pricing page.
  Use accordion for longer answers, two-column for short scannable Q&A.
typical-page-section: Lower half of landing page, typically after pricing and before the final CTA.

Edit this pageorReport an issue

CTA

Call-to-action section with eyebrow, title, description, icon, action buttons, and a rich background system supporting colors, gradients, patterns, and images.

Blog

A complete blog component suite — post cards, filterable list grid, full-article detail layout, author bio, post navigation, sidebar, and in-blog newsletter CTA.