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="true"
: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 | true | Allow more than one item open at a time (marketing page standard) |
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.