FAQ

Use the FAQ block to display frequently asked questions in a two-column grid layout with question icons and organized answers.

Default FAQ

Blade code

<x-fwb.blocks.marketing.faq />

Custom FAQ

Common Questions

How do I install the package?

You can install the package via Composer by running composer require themesberg/flowbite-blade.

Is dark mode supported?

Yes, all components include full dark mode support out of the box using Tailwind CSS dark variant classes.

Can I customize the components?

Absolutely. All components accept custom attributes and classes, and you can override the default slot content with your own markup.

Blade code

<x-fwb.blocks.marketing.faq title="Common Questions">
    <div>
        <div class="mb-10">
            <h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
                <x-fwb-o-question-circle class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" />
                How do I install the package?
            </h3>
            <p class="text-gray-500 dark:text-gray-400">You can install the package via Composer by running <code>composer require themesberg/flowbite-blade</code>.</p>
        </div>
        <div class="mb-10">
            <h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
                <x-fwb-o-question-circle class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" />
                Is dark mode supported?
            </h3>
            <p class="text-gray-500 dark:text-gray-400">Yes, all components include full dark mode support out of the box using Tailwind CSS dark variant classes.</p>
        </div>
    </div>
    <div>
        <div class="mb-10">
            <h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
                <x-fwb-o-question-circle class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" />
                Can I customize the components?
            </h3>
            <p class="text-gray-500 dark:text-gray-400">Absolutely. All components accept custom attributes and classes, and you can override the default slot content with your own markup.</p>
        </div>
    </div>
</x-fwb.blocks.marketing.faq>

Component Properties

FAQ x-fwb.blocks.marketing.faq

Prop Type Default Description
title string 'Frequently asked questions' Heading text displayed above the questions grid.
slot slot - FAQ content arranged in a two-column grid. Each column should be a <div> containing question/answer pairs.