webdevpuneet.com

Split FAQ With Contact Card

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

3 sectionsView all →
FAQ

Split FAQ With Contact Card

Responsive · Animated
FAQ

FAQ Accordion

Responsive · Animated
FAQ

FAQ Grid

Responsive · Animated

Split FAQ With Contact Card — Free Website Section Template

FAQ · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryFAQ
Tagsfaqaccordionsplitstickycontactsupportschemalight
Updated October 20, 2026

Extend with AI

Take This Section Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Two columns: sticky heading and support card beside the questions
Support card with icon, title, text and button (switchable)
Accordion where several answers can be open at once
Native details/summary with GSAP height animation
FAQPage JSON-LD in the HTML export
Up to 15 questions: add, duplicate, reorder, remove
Stacks on tablets and phones
Export HTML, a ZIP, React or Vue

About this section

Split FAQ With Contact Card — Free Two-Column FAQ Template

Split FAQ With Contact Card: A two-column FAQ: on the left a heading, intro and a support card with an icon, a short message and a contact button, which stays in view while you scroll; on the right an accordion of questions that open smoothly. Several answers can be open at once.

Split FAQ With Contact Card pairs your questions with a clear way to get help. On the left, a heading, intro and a support card with an icon, a short message and a contact button stay in view as visitors scroll; on the right, an accordion of questions opens smoothly, and several answers can be open at once.

Turns questions into conversations

Visitors who can't find their answer are one click from your support team, without scrolling back up. Point the button to a contact form, a chat, an email address or a booking page, and switch the card off if you don't need it.

Native, animated, indexable

Questions use native details/summary, so they work without JavaScript and every answer stays in the HTML. GSAP animates the height of each answer and rotates the plus icon; reduced-motion users get instant changes. The exported HTML page includes FAQPage schema built from your questions.

Responsive layout

On wide screens the left column is sticky; on tablets and phones the columns stack, with the support card moving below the heading. Choose the card's icon from 60 Lucide icons.

Export it

Download HTML or a ZIP, copy a React or Vue component, or fork it into My Code. For a centred layout, see the FAQ Accordion.

Why use it

Why Use the Split FAQ With Contact Card

☎
Help is always visible
The sticky support card stays beside the questions, so the next step is never out of reach.
⇆
Reads like a help page
Two columns separate "who to ask" from "what people ask", which suits support and service pages.
⭐
Rich-result ready
FAQPage schema in the export helps search engines show your answers directly.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading, contact card and questions in the panel. Switch the contact card on or off. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🛒
Shop shipping and returns
Answer delivery, returns and payment questions on product or checkout pages, with a button to contact customer service.
🛟
Support page
Put the most common support questions on the right and a "Chat with us" card on the left that opens your help desk.
🏠
Service business
Plumbers, clinics or studios can answer pricing, availability and process questions with a "Book a call" card.
🧑‍💻
SaaS onboarding help
Cover account setup, integrations and billing, with the card linking to your documentation or a live chat.

In real websites

Website Templates That Use the Split FAQ With Contact Card Section

The Split FAQ With Contact Card section is part of 3 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: Mobile App Landing Page, Dental Clinic Website, Wedding Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

Got questions?

Frequently Asked Questions

Yes. In this section each question opens and closes on its own, so visitors can compare answers. The FAQ Accordion section opens one at a time instead.

On wide screens, yes: it uses position: sticky so the heading and support card stay visible while the questions scroll. On narrow screens the columns stack normally.

Anywhere: a contact page, a mailto: address, a tel: number, a chat widget page or a booking tool such as Calendly.

Yes. The exported HTML page includes FAQPage JSON-LD built from your questions and answers.

It saves an editable copy of your Split FAQ With Contact Card in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.