Landing Page FAQ Collapsible Component
- Updated on
This component displays a collapsible list of frequently asked questions and their answers.
FAQ
Looking to learn more about our product? Here are some of the most common questions.
Usage
import { LandingFaqCollapsibleSection } from '@/components/landing/LandingFaqCollapsible';
const faqItems = [
{
question: 'Can I get a refund?',
answer:
'Yes, you can get a refund within 30 days of your purchase. No questions asked.',
},
{
question: 'What technologies are used?',
answer: 'We use Next.js, Tailwind CSS, and Vercel for the deployment.',
},
{
question: 'What do I get if I pre-order?',
answer:
'With the pre-order, you get a 50% discount on the final price and a lifetime license for the generated code.',
},
];
<LandingFaqCollapsibleSection
title="FAQ"
description="Looking to learn more about our product? Here are some of the most common
questions."
faqItems={faqItems}
/>
Examples
With Background
FAQ
Looking to learn more about our product? Here are some of the most common questions.
With Background Glow
FAQ
Looking to learn more about our product? Here are some of the most common questions.
API Reference
Prop NameProp TypeRequiredDefault titlestring ǀ React.ReactNode No- titleComponent React.ReactNode No- description string ǀ React.ReactNode No- descriptionComponent React.ReactNode No- faqItems FaqItem[] Yes- withBackground boolean No false withBackgroundGlow boolean No false variant 'primary' ǀ 'secondary' No 'primary' backgroundGlowVariant 'primary' ǀ 'secondary' No 'primary'export interface FaqItem {
question: string;
answer: string;
}
More Examples
For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.
