FAQ Components in Filytreck library

FAQ from FilyTreck

<section class="py-24 md:py-36">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap xl:items-center -m-8">
            <div class="w-full md:w-1/2 p-8">
                <img class="w-full h-full object-cover rounded-3xl" style="height: 924px;" src="fily-assets/faq/pic2.jpg" alt="">
            </div>
            <div class="w-full md:w-1/2 p-8">
                <div class="max-w-xl mx-auto">
                    <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold">Frequently asked questions</h2>
                    <p class="pb-10 mb-10 text-xl text-gray-500 font-medium leading-relaxed border-b border-gray-100">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt. Ut sem justo, porta eget massa vitae, vehicula convallis velit.</p>
                    <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" class="mb-11 block cursor-pointer">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 :class="{'text-gray-500': accordion}" class="font-heading text-xl text-gray-500 font-bold transition duration-200">How can I get started with FilyTreck?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <span class="inline-block transform" :class="{'text-gray-500 rotate-180': accordion, 'rotate-0': !accordion }">
                                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.00003 0.499967C7.26264 0.49951 7.52275 0.550956 7.76541 0.65135C8.00808 0.751745 8.22851 0.899107 8.41403 1.08497L13.707 6.37897L12.293 7.79297L7.00003 2.49997L1.70703 7.79297L0.293031 6.37897L5.58603 1.08597C5.77148 0.899927 5.99187 0.75238 6.23453 0.651813C6.4772 0.551246 6.73735 0.499641 7.00003 0.499967Z" fill="currentColor"></path>
                                    </svg> 
                                </span>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-2 font-medium">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                    <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" class="mb-11 block cursor-pointer">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 :class="{'text-gray-500': accordion}" class="font-heading text-xl text-gray-500 font-bold transition duration-200">Are my data and information secure in FilyTreck?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <span class="inline-block transform" :class="{'text-gray-500 rotate-180': accordion, 'rotate-0': !accordion }">
                                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.00003 0.499967C7.26264 0.49951 7.52275 0.550956 7.76541 0.65135C8.00808 0.751745 8.22851 0.899107 8.41403 1.08497L13.707 6.37897L12.293 7.79297L7.00003 2.49997L1.70703 7.79297L0.293031 6.37897L5.58603 1.08597C5.77148 0.899927 5.99187 0.75238 6.23453 0.651813C6.4772 0.551246 6.73735 0.499641 7.00003 0.499967Z" fill="currentColor"></path>
                                    </svg> 
                                </span>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-2 font-medium">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                    <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" class="mb-11 block cursor-pointer">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 :class="{'text-gray-500': accordion}" class="font-heading text-xl text-gray-500 font-bold transition duration-200">Is there a free trial available for new users?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <span class="inline-block transform" :class="{'text-gray-500 rotate-180': accordion, 'rotate-0': !accordion }">
                                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.00003 0.499967C7.26264 0.49951 7.52275 0.550956 7.76541 0.65135C8.00808 0.751745 8.22851 0.899107 8.41403 1.08497L13.707 6.37897L12.293 7.79297L7.00003 2.49997L1.70703 7.79297L0.293031 6.37897L5.58603 1.08597C5.77148 0.899927 5.99187 0.75238 6.23453 0.651813C6.4772 0.551246 6.73735 0.499641 7.00003 0.499967Z" fill="currentColor"></path>
                                    </svg> 
                                </span>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-2 font-medium">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                    <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" class="mb-11 block cursor-pointer">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 :class="{'text-gray-500': accordion}" class="font-heading text-xl text-gray-500 font-bold transition duration-200">What types of support and assistance do you provide for users?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <span class="inline-block transform" :class="{'text-gray-500 rotate-180': accordion, 'rotate-0': !accordion }">
                                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.00003 0.499967C7.26264 0.49951 7.52275 0.550956 7.76541 0.65135C8.00808 0.751745 8.22851 0.899107 8.41403 1.08497L13.707 6.37897L12.293 7.79297L7.00003 2.49997L1.70703 7.79297L0.293031 6.37897L5.58603 1.08597C5.77148 0.899927 5.99187 0.75238 6.23453 0.651813C6.4772 0.551246 6.73735 0.499641 7.00003 0.499967Z" fill="currentColor"></path>
                                    </svg> 
                                </span>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-2 font-medium">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                    <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" class="mb-11 block cursor-pointer">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 :class="{'text-gray-500': accordion}" class="font-heading text-xl text-gray-500 font-bold transition duration-200">Can I use FilyTreck on different devices?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <span class="inline-block transform" :class="{'text-gray-500 rotate-180': accordion, 'rotate-0': !accordion }">
                                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.00003 0.499967C7.26264 0.49951 7.52275 0.550956 7.76541 0.65135C8.00808 0.751745 8.22851 0.899107 8.41403 1.08497L13.707 6.37897L12.293 7.79297L7.00003 2.49997L1.70703 7.79297L0.293031 6.37897L5.58603 1.08597C5.77148 0.899927 5.99187 0.75238 6.23453 0.651813C6.4772 0.551246 6.73735 0.499641 7.00003 0.499967Z" fill="currentColor"></path>
                                    </svg> 
                                </span>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-2 font-medium">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                    <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" class="mb-11 block cursor-pointer">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 :class="{'text-gray-500': accordion}" class="font-heading text-xl text-gray-500 font-bold transition duration-200">How can I import or export my tasks and data?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <span class="inline-block transform text-gray-500 rotate-180 " :class="{'text-gray-500 rotate-180': accordion, 'rotate-0': !accordion }">
                                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.00003 0.499967C7.26264 0.49951 7.52275 0.550956 7.76541 0.65135C8.00808 0.751745 8.22851 0.899107 8.41403 1.08497L13.707 6.37897L12.293 7.79297L7.00003 2.49997L1.70703 7.79297L0.293031 6.37897L5.58603 1.08597C5.77148 0.899927 5.99187 0.75238 6.23453 0.651813C6.4772 0.551246 6.73735 0.499641 7.00003 0.499967Z" fill="currentColor"></path>
                                    </svg> 
                                </span>
                            </div>
                        </div>
                        <div x-ref="container" :style="!accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                            <p class="mt-2 font-medium">To get started with FilyTreck, simply create an account and log in to begin using the app.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

FAQ from FilyTreck

<section class="py-12 py-lg-24 py-xl-32"> <div class="container"> <div class="row"> <div class="col-lg-6 mb-10 mb-lg-0"><img class="img-fluid d-block w-100 h-100 mw-xl mw-lg-lg mx-auto rounded-3" style="object-fit: cover;" src="fily-assets/faq/pic2.jpg" alt=""></div> <div class="col-lg-6"> <div class="mw-xl mx-auto pt-xl-12 pb-xl-10"> <div class="mb-10 pb-10 border-bottom border-light"> <h2 class="font-heading mb-10"><span class="d-block">Frequently</span><span>asked questions</span></h2> <p class="mw-md mw-xl-lg fs-6 text-light-dark fw-medium mb-0">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt. Ut sem justo, porta eget massa vitae, vehicula convallis velit.</p> </div> <div> <button class="btn w-100 mb-10 p-0 text-start border-0"> <div class="d-flex align-items-center justify-content-between"> <div class="pe-8"><span class="fs-6 fw-bold">How can I get started with FilyTreck?</span></div> <div> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8.49997C12.2626 8.49951 12.5228 8.55096 12.7654 8.65135C13.0081 8.75174 13.2285 8.89911 13.414 9.08497L18.707 14.379L17.293 15.793L12 10.5L6.70703 15.793L5.29303 14.379L10.586 9.08597C10.7715 8.89993 10.9919 8.75238 11.2345 8.65181C11.4772 8.55125 11.7374 8.49964 12 8.49997Z" fill="black"></path> </svg> </div> </div> <div class="mt-4"> <p class="mw-sm fw-medium mb-0">To get started with FilyTreck, simply create an account and log in to begin using the app.</p> </div> </button> <button class="btn w-100 mb-10 p-0 text-start border-0"> <div class="d-flex align-items-center justify-content-between"> <div class="pe-8"><span class="fs-6 text-light-dark fw-bold">Are my data and information secure in FilyTreck?</span></div> <div> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8.49997C12.2626 8.49951 12.5228 8.55096 12.7654 8.65135C13.0081 8.75174 13.2285 8.89911 13.414 9.08497L18.707 14.379L17.293 15.793L12 10.5L6.70703 15.793L5.29303 14.379L10.586 9.08597C10.7715 8.89993 10.9919 8.75238 11.2345 8.65181C11.4772 8.55125 11.7374 8.49964 12 8.49997Z" fill="black"></path> </svg> </div> </div> <div class="d-none mt-4"> <p class="mw-sm fw-medium mb-0">To get started with FilyTreck, simply create an account and log in to begin using the app.</p> </div> </button> <button class="btn w-100 mb-10 p-0 text-start border-0"> <div class="d-flex align-items-center justify-content-between"> <div class="pe-8"><span class="fs-6 text-light-dark fw-bold">Is there a free trial available for new users?</span></div> <div> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8.49997C12.2626 8.49951 12.5228 8.55096 12.7654 8.65135C13.0081 8.75174 13.2285 8.89911 13.414 9.08497L18.707 14.379L17.293 15.793L12 10.5L6.70703 15.793L5.29303 14.379L10.586 9.08597C10.7715 8.89993 10.9919 8.75238 11.2345 8.65181C11.4772 8.55125 11.7374 8.49964 12 8.49997Z" fill="black"></path> </svg> </div> </div> <div class="d-none mt-4"> <p class="mw-sm fw-medium mb-0">To get started with FilyTreck, simply create an account and log in to begin using the app.</p> </div> </button> <button class="btn w-100 mb-10 p-0 text-start border-0"> <div class="d-flex align-items-center justify-content-between"> <div class="pe-8"><span class="fs-6 text-light-dark fw-bold">What types of support and assistance do you provide for users?</span></div> <div> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8.49997C12.2626 8.49951 12.5228 8.55096 12.7654 8.65135C13.0081 8.75174 13.2285 8.89911 13.414 9.08497L18.707 14.379L17.293 15.793L12 10.5L6.70703 15.793L5.29303 14.379L10.586 9.08597C10.7715 8.89993 10.9919 8.75238 11.2345 8.65181C11.4772 8.55125 11.7374 8.49964 12 8.49997Z" fill="black"></path> </svg> </div> </div> <div class="d-none mt-4"> <p class="mw-sm fw-medium mb-0">To get started with FilyTreck, simply create an account and log in to begin using the app.</p> </div> </button> <button class="btn w-100 mb-10 p-0 text-start border-0"> <div class="d-flex align-items-center justify-content-between"> <div class="pe-8"><span class="fs-6 text-light-dark fw-bold">Can I use FilyTreck on different devices?</span></div> <div> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8.49997C12.2626 8.49951 12.5228 8.55096 12.7654 8.65135C13.0081 8.75174 13.2285 8.89911 13.414 9.08497L18.707 14.379L17.293 15.793L12 10.5L6.70703 15.793L5.29303 14.379L10.586 9.08597C10.7715 8.89993 10.9919 8.75238 11.2345 8.65181C11.4772 8.55125 11.7374 8.49964 12 8.49997Z" fill="black"></path> </svg> </div> </div> <div class="d-none mt-4"> <p class="mw-sm fw-medium mb-0">To get started with FilyTreck, simply create an account and log in to begin using the app.</p> </div> </button> <button class="btn w-100 p-0 text-start border-0"> <div class="d-flex align-items-center justify-content-between"> <div class="pe-8"><span class="fs-6 text-light-dark fw-bold">How can I import or export my tasks and data?</span></div> <div> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8.49997C12.2626 8.49951 12.5228 8.55096 12.7654 8.65135C13.0081 8.75174 13.2285 8.89911 13.414 9.08497L18.707 14.379L17.293 15.793L12 10.5L6.70703 15.793L5.29303 14.379L10.586 9.08597C10.7715 8.89993 10.9919 8.75238 11.2345 8.65181C11.4772 8.55125 11.7374 8.49964 12 8.49997Z" fill="black"></path> </svg> </div> </div> <div class="d-none mt-4"> <p class="mw-sm fw-medium mb-0">To get started with FilyTreck, simply create an account and log in to begin using the app.</p> </div> </button> </div> </div> </div> </div> </div> </section>

Faq Components by Shuffle

Choose from 10 variations of FAQ UI components. Presented here are variants available in Filytreck library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all FAQ UI components, code and our visual editor. Try the demo for free!

Redirecting to PayPal

Supporting tools

Plans

Faq Components in Filytreck library

Framework

UI Library

Components

FAQ from FilyTreck

Split-screen FAQ section with photo and accordion questions

Your next website starts here

FAQ from FilyTreck

Faq Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Get Shuffle for life at today's price

New in every Lifetime License

A more capable AI Agent

Shopify theme export

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Faq Components in Filytreck library

Framework

UI Library

Components

FAQ from FilyTreck

Split-screen FAQ section with photo and accordion questions

Your next website starts here

FAQ from FilyTreck

Faq Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company