FAQ Components in Wrexa library

FAQ from Wrexa

<section class="py-24 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/4 px-4 mb-12 lg:mb-0">
        <div class="flex items-center">
          <span class="font-heading text-xl">04</span>
          <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
          <span class="font-heading text-xl">Helpdesk/FAQs</span>
        </div>
      </div>
      <div class="w-full lg:w-3/4 px-4">
        <h1 class="font-heading text-4xl mb-6">Can I change my plan?</h1>
        <p class="max-w-2xl font-light mb-12 tracking-tight">Yees, u can try us for free for 60 days. We’ll provide u with a free, personalized 40-minute onboarding call to get you up and running as soon as possible.</p>
        <div class="pb-16 mb-10 border-b border-gray-200">
          <div class="flex max-w-max px-10 py-2 mb-2 border border-gray-200 rounded-lg">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
            <span class="ml-6 sm:text-lg">The first payment</span>
          </div>
          <div class="flex max-w-max px-10 py-2 mb-2 border border-gray-200 rounded-lg">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
            <span class="ml-6 sm:text-lg">The same amount for all</span>
          </div>
          <div class="flex max-w-max px-10 py-2 border border-gray-200 rounded-lg">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
            <span class="ml-6 sm:text-lg">Extra 10% off</span>
          </div>
        </div>
        <div>
          <div class="mb-24 sm:mb-32">
            <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full text-left pb-6 mb-10 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h2 class="font-heading text-2xl sm:text-3xl md:text-4xl mr-2">How dou I change my account email?</h2>
                    <svg :class="{ 'hidden': accordion }" class="flex-shrink-0" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                      <path d="M26.6344 18.6471H21.5375V13.3658C21.5375 12.6096 20.925 11.9971 20.1687 11.9971C19.4125 11.9971 18.8 12.6096 18.8 13.3658V18.6471H13.3625C12.6125 18.6471 12 19.2596 12 20.0158C12 20.7721 12.6125 21.3846 13.3687 21.3846H18.8063V26.6346C18.8063 27.3908 19.4188 28.0033 20.175 28.0033C20.9313 28.0033 21.5437 27.3908 21.5437 26.6346V21.3846H26.6406C27.3969 21.3846 28.0094 20.7721 28.0094 20.0158C28 19.2596 27.3906 18.6471 26.6344 18.6471Z" fill="#C7C9CF"></path>
                      <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
                    </svg>
                    <svg :class="{ 'hidden': !accordion }" class="hidden flex-shrink-0" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                        <path d="M26.6344 18.647H21.5375H20.0683C19.0459 18.647 20.1541 18.6475 19.3978 18.6475C18.6416 18.6475 18.0664 18.6478 18.8063 18.647L18.8 18.647H13.3625C12.6125 18.647 12 19.2595 12 20.0158C12 20.772 12.6125 21.3846 13.3687 21.3846H18.8063L18.5 20.5005C18.5 21.2567 18.05 21.3846 18.8063 21.3846C19.5625 21.3846 18.5 21.3846 17 21.3846H21.5437H26.6406C27.3969 21.3846 28.0094 20.772 28.0094 20.0158C28 19.2595 27.3906 18.647 26.6344 18.647Z" fill="#C7C9CF"></path>
                        <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
                    </svg>
                </div>
                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="mt-5 text-xl">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut.</p>
                </div>    
            </button>
            <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full text-left pb-6 mb-10 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h2 class="font-heading text-2xl sm:text-3xl md:text-4xl mr-2">Can I change my plan?</h2>
                    <svg :class="{ 'hidden': accordion }" class="flex-shrink-0" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                        <path d="M26.6344 18.6471H21.5375V13.3658C21.5375 12.6096 20.925 11.9971 20.1687 11.9971C19.4125 11.9971 18.8 12.6096 18.8 13.3658V18.6471H13.3625C12.6125 18.6471 12 19.2596 12 20.0158C12 20.7721 12.6125 21.3846 13.3687 21.3846H18.8063V26.6346C18.8063 27.3908 19.4188 28.0033 20.175 28.0033C20.9313 28.0033 21.5437 27.3908 21.5437 26.6346V21.3846H26.6406C27.3969 21.3846 28.0094 20.7721 28.0094 20.0158C28 19.2596 27.3906 18.6471 26.6344 18.6471Z" fill="#C7C9CF"></path>
                        <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
                      </svg>
                      <svg :class="{ 'hidden': !accordion }" class="hidden flex-shrink-0" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                          <path d="M26.6344 18.647H21.5375H20.0683C19.0459 18.647 20.1541 18.6475 19.3978 18.6475C18.6416 18.6475 18.0664 18.6478 18.8063 18.647L18.8 18.647H13.3625C12.6125 18.647 12 19.2595 12 20.0158C12 20.772 12.6125 21.3846 13.3687 21.3846H18.8063L18.5 20.5005C18.5 21.2567 18.05 21.3846 18.8063 21.3846C19.5625 21.3846 18.5 21.3846 17 21.3846H21.5437H26.6406C27.3969 21.3846 28.0094 20.772 28.0094 20.0158C28 19.2595 27.3906 18.647 26.6344 18.647Z" fill="#C7C9CF"></path>
                          <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
                      </svg>
                </div>
                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="mt-5 text-xl">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut.</p>
                </div>
            </button>
            <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full text-left pb-6 mb-10 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h2 class="font-heading text-2xl sm:text-3xl md:text-4xl mr-2">How dou I change my account email?</h2>
                    <svg :class="{ 'hidden': accordion }" class="flex-shrink-0" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                        <path d="M26.6344 18.6471H21.5375V13.3658C21.5375 12.6096 20.925 11.9971 20.1687 11.9971C19.4125 11.9971 18.8 12.6096 18.8 13.3658V18.6471H13.3625C12.6125 18.6471 12 19.2596 12 20.0158C12 20.7721 12.6125 21.3846 13.3687 21.3846H18.8063V26.6346C18.8063 27.3908 19.4188 28.0033 20.175 28.0033C20.9313 28.0033 21.5437 27.3908 21.5437 26.6346V21.3846H26.6406C27.3969 21.3846 28.0094 20.7721 28.0094 20.0158C28 19.2596 27.3906 18.6471 26.6344 18.6471Z" fill="#C7C9CF"></path>
                        <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
                      </svg>
                      <svg :class="{ 'hidden': !accordion }" class="hidden flex-shrink-0" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                          <path d="M26.6344 18.647H21.5375H20.0683C19.0459 18.647 20.1541 18.6475 19.3978 18.6475C18.6416 18.6475 18.0664 18.6478 18.8063 18.647L18.8 18.647H13.3625C12.6125 18.647 12 19.2595 12 20.0158C12 20.772 12.6125 21.3846 13.3687 21.3846H18.8063L18.5 20.5005C18.5 21.2567 18.05 21.3846 18.8063 21.3846C19.5625 21.3846 18.5 21.3846 17 21.3846H21.5437H26.6406C27.3969 21.3846 28.0094 20.772 28.0094 20.0158C28 19.2595 27.3906 18.647 26.6344 18.647Z" fill="#C7C9CF"></path>
                          <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
                      </svg>
                </div>
                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="mt-5 text-xl">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut.</p>
                </div>
            </button>
            <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full text-left pb-6 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h2 class="font-heading text-2xl sm:text-3xl md:text-4xl mr-2">Can I change my plan?</h2>
                    <svg :class="{ 'hidden': accordion }" class="flex-shrink-0" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                        <path d="M26.6344 18.6471H21.5375V13.3658C21.5375 12.6096 20.925 11.9971 20.1687 11.9971C19.4125 11.9971 18.8 12.6096 18.8 13.3658V18.6471H13.3625C12.6125 18.6471 12 19.2596 12 20.0158C12 20.7721 12.6125 21.3846 13.3687 21.3846H18.8063V26.6346C18.8063 27.3908 19.4188 28.0033 20.175 28.0033C20.9313 28.0033 21.5437 27.3908 21.5437 26.6346V21.3846H26.6406C27.3969 21.3846 28.0094 20.7721 28.0094 20.0158C28 19.2596 27.3906 18.6471 26.6344 18.6471Z" fill="#C7C9CF"></path>
                        <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
                      </svg>
                      <svg :class="{ 'hidden': !accordion }" class="hidden flex-shrink-0" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                          <path d="M26.6344 18.647H21.5375H20.0683C19.0459 18.647 20.1541 18.6475 19.3978 18.6475C18.6416 18.6475 18.0664 18.6478 18.8063 18.647L18.8 18.647H13.3625C12.6125 18.647 12 19.2595 12 20.0158C12 20.772 12.6125 21.3846 13.3687 21.3846H18.8063L18.5 20.5005C18.5 21.2567 18.05 21.3846 18.8063 21.3846C19.5625 21.3846 18.5 21.3846 17 21.3846H21.5437H26.6406C27.3969 21.3846 28.0094 20.772 28.0094 20.0158C28 19.2595 27.3906 18.647 26.6344 18.647Z" fill="#C7C9CF"></path>
                          <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
                      </svg>
                </div>
                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="mt-5 text-xl">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut.</p>
                </div>
            </button>
          </div>
          <div class="lg:ml-20"><a class="inline-block w-full sm:w-auto px-7 py-4 mb-4 sm:mb-0 sm:mr-6 text-center font-medium border border-gray-900 hover:text-gray-700 rounded" href="#">All Questions</a><a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Have other questions?</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

FAQ from Wrexa

<section class="position-relative py-24 bg-light"> <div class="container"> <div class="row"> <div class="col-12 col-md-4 col-xl-3 mb-16 mb-md-0"> <div class="d-flex align-items-center mb-8"><span class="display-6 h5 mb-0" >04</span> <div class="mx-4 bg-light-dark rounded-circle" style="width: 4px; height: 4px;"></div><span class="display-6 h5 mb-0" >Helpdesk/FAQs</span> </div> </div> <div class="col-12 col-md-8 col-xl-9"> <h1 class="display-5 mb-6" >Can I change my plan?</h1> <p class="text-muted lh-lg mb-12" >Yees, u can try us for free for 60 days. We’ll provide u with a free, personalized 40-minute onboarding call to get you up and running as soon as possible.</p> <div class="d-flex flex-column align-items-start mb-14"> <div class="d-inline-flex px-4 px-sm-10 py-3 mb-2 align-items-center border rounded-3"> <svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle> <circle cx="14" cy="14" r="2" fill="#95A8FF"></circle> </svg><span class="ms-6 text-dark mb-0" >The first payment</span> </div> <div class="d-inline-flex px-4 px-sm-10 py-3 mb-2 align-items-center border rounded-3"> <svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle> <circle cx="14" cy="14" r="2" fill="#95A8FF"></circle> </svg><span class="ms-6 text-dark mb-0" >The same amount for all</span> </div> <div class="d-inline-flex px-4 px-sm-10 py-3 mb-2 align-items-center border rounded-3"> <svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle> <circle cx="14" cy="14" r="2" fill="#95A8FF"></circle> </svg><span class="ms-6 text-dark mb-0" >Extra 10% off</span> </div> </div> <div class="border-top"> <div class="mb-32"> <button class="btn d-flex px-0 w-100 pt-10 pb-6 justify-content-between align-items-center text-start border-bottom"> <h2 class="display-5 mb-0" >How dou I change my account email?</h2> <svg class="flex-shrink-0" width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle> <path d="M26.6344 18.6471H21.5375V13.3658C21.5375 12.6096 20.925 11.9971 20.1687 11.9971C19.4125 11.9971 18.8 12.6096 18.8 13.3658V18.6471H13.3625C12.6125 18.6471 12 19.2596 12 20.0158C12 20.7721 12.6125 21.3846 13.3687 21.3846H18.8063V26.6346C18.8063 27.3908 19.4188 28.0033 20.175 28.0033C20.9313 28.0033 21.5437 27.3908 21.5437 26.6346V21.3846H26.6406C27.3969 21.3846 28.0094 20.7721 28.0094 20.0158C28 19.2596 27.3906 18.6471 26.6344 18.6471Z" fill="#C7C9CF"></path> <defs> <rect width="16" height="16" fill="white" transform="translate(12 12)"></rect> </defs> </svg> </button> <button class="btn d-flex px-0 w-100 pt-10 pb-6 justify-content-between align-items-center text-start border-bottom"> <h2 class="display-5 mb-0" >Can I change my plan?</h2> <svg class="flex-shrink-0" width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle> <path d="M26.6344 18.6471H21.5375V13.3658C21.5375 12.6096 20.925 11.9971 20.1687 11.9971C19.4125 11.9971 18.8 12.6096 18.8 13.3658V18.6471H13.3625C12.6125 18.6471 12 19.2596 12 20.0158C12 20.7721 12.6125 21.3846 13.3687 21.3846H18.8063V26.6346C18.8063 27.3908 19.4188 28.0033 20.175 28.0033C20.9313 28.0033 21.5437 27.3908 21.5437 26.6346V21.3846H26.6406C27.3969 21.3846 28.0094 20.7721 28.0094 20.0158C28 19.2596 27.3906 18.6471 26.6344 18.6471Z" fill="#C7C9CF"></path> <defs> <rect width="16" height="16" fill="white" transform="translate(12 12)"></rect> </defs> </svg> </button> <button class="btn d-flex px-0 w-100 pt-10 pb-6 justify-content-between align-items-center text-start border-bottom"> <h2 class="display-5 mb-0" >How dou I change my account email?</h2> <svg class="flex-shrink-0" width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle> <path d="M26.6344 18.6471H21.5375V13.3658C21.5375 12.6096 20.925 11.9971 20.1687 11.9971C19.4125 11.9971 18.8 12.6096 18.8 13.3658V18.6471H13.3625C12.6125 18.6471 12 19.2596 12 20.0158C12 20.7721 12.6125 21.3846 13.3687 21.3846H18.8063V26.6346C18.8063 27.3908 19.4188 28.0033 20.175 28.0033C20.9313 28.0033 21.5437 27.3908 21.5437 26.6346V21.3846H26.6406C27.3969 21.3846 28.0094 20.7721 28.0094 20.0158C28 19.2596 27.3906 18.6471 26.6344 18.6471Z" fill="#C7C9CF"></path> <defs> <rect width="16" height="16" fill="white" transform="translate(12 12)"></rect> </defs> </svg> </button> <button class="btn d-flex px-0 w-100 pt-10 pb-6 justify-content-between align-items-center text-start border-bottom"> <h2 class="display-5 mb-0" >Can I change my plan?</h2> <svg class="flex-shrink-0" width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle> <path d="M26.6344 18.6471H21.5375V13.3658C21.5375 12.6096 20.925 11.9971 20.1687 11.9971C19.4125 11.9971 18.8 12.6096 18.8 13.3658V18.6471H13.3625C12.6125 18.6471 12 19.2596 12 20.0158C12 20.7721 12.6125 21.3846 13.3687 21.3846H18.8063V26.6346C18.8063 27.3908 19.4188 28.0033 20.175 28.0033C20.9313 28.0033 21.5437 27.3908 21.5437 26.6346V21.3846H26.6406C27.3969 21.3846 28.0094 20.7721 28.0094 20.0158C28 19.2596 27.3906 18.6471 26.6344 18.6471Z" fill="#C7C9CF"></path> <defs> <rect width="16" height="16" fill="white" transform="translate(12 12)"></rect> </defs> </svg> </button> </div> <div class="mb-n4"><a class="btn mb-4 me-6 btn-outline-dark" href="#" >All Questions</a><a class="btn mb-4 btn-primary" href="#" >Have other questions?</a></div> </div> </div> </div> </div> </section>

Faq Components by Shuffle

Choose from 10 variations of FAQ UI components. Presented here are variants available in Wrexa 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 Wrexa library

Framework

UI Library

Components

FAQ from Wrexa

FAQ Section with Expanded Question and Collapsed Accordion Rows

Your next website starts here

FAQ from Wrexa

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 Wrexa library

Framework

UI Library

Components

FAQ from Wrexa

FAQ Section with Expanded Question and Collapsed Accordion Rows

Your next website starts here

FAQ from Wrexa

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