Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
FAQ Grid — Free Website Section Template
FAQ · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
FAQ Grid — Free Two-Column Questions and Answers Section
FAQ Grid shows every answer at once. Questions and answers sit in a two-column grid of cards, each with a small question-mark badge, the question in bold and a short answer underneath, so visitors scan the whole page without clicking anything. It works best when answers are a sentence or two.
Nothing hidden
Unlike an accordion, a grid puts every answer in front of the reader, which suits short, important facts such as limits, pricing details, data location or compatibility. The markup is a description list (dt for questions, dd for answers), which is the semantic HTML for question-and-answer pairs.
Ready for search
All answers are visible on the page, and the exported HTML includes FAQPage JSON-LD generated from them, so search engines and AI assistants can understand and quote your answers.
Edit and animate
Add up to twelve questions and reorder them. It ships in a dark navy and sky-blue theme that suits developer products, and you can switch to any preset or your brand kit. The heading reveals with SplitText and the cards stagger in on scroll; the grid becomes one column on phones.
Export it
Download HTML, a ZIP, React or Vue, or fork into My Code. For longer answers, use the FAQ Accordion.
Why use it
Why Use the FAQ Grid
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading and questions in the panel. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match 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.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save 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
Got questions?
Frequently Asked Questions
Use a grid when answers are short (one or two sentences) and you want all of them read. Use an accordion when answers are longer or you have many questions.
Yes. Questions and answers are a description list, with dt for each question and dd for each answer, which screen readers and search engines understand as pairs.
Yes. The exported HTML page includes FAQPage JSON-LD generated from your questions and answers.
Yes. Pick a light colour preset or apply your brand kit; the cards, badges and text colours all follow the theme.
It saves an editable copy of your FAQ Grid 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. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.