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 Name | Prop Type | Required | Default |
---|---|---|---|
title | string ǀ 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.