FAQ Premium is a fully featured, animated FAQ accordion component built for Framer. It includes live search with result highlighting, automatic category tabs, rich text formatting, per-item icons, CTA buttons, and FAQPage JSON-LD schema for SEO. Choose from five curated style presets or build your own with granular color controls. Ideal for SaaS landing pages, product sites, help centres, and pricing pages.
Five style presets — Dark, Light, Indigo, Emerald, and fully Custom — with three layout modes: Cards, Dividers, and Minimal
Built-in search bar with instant filtering and keyword highlighting across questions and answers
Automatic category tabs generated from your FAQ data for fast, jump-free filtering
Rich text support for bold, italic, inline code, links, and ordered or unordered lists inside answers
FAQPage JSON-LD schema output for Google rich results, toggled with a single control
Four animated accordion icon styles (Chevron, Plus/Minus, Arrow, Caret) with optional icon background
Per-item icons and CTA buttons with customisable labels and links
Smooth spring-based open and close animations with configurable speed
Full keyboard navigation with arrow keys, Home, and End support
Question text
Answer text (supports markdown formatting)
Category label
Item icon (9 options including Question, Lightbulb, Shield, Zap, Star, and more)
CTA label and CTA link
Layout Style — Cards, Dividers, or Minimal
Style Preset — Dark, Light, Indigo, Emerald, or Custom
Search Bar — show or hide, with custom placeholder text
Category Tabs — show or hide, with custom "All" label
Numbering — show or hide question numbers (01, 02, 03)
SEO Schema — enable or disable FAQPage JSON-LD output
Base colors — Background, Question Text, Answer Text, Accent, Accent Soft
Card Colors — Card BG, Card Border, Card Hover (Cards layout only)
Divider Color (Dividers layout only)
Search Colors — Search BG, Search Border, Highlight (when search is enabled)
Tab Colors — Tab BG, Active BG, Tab Text, Active Text (when categories are enabled)
Border radius
Padding
Gap between items
Icon type — Chevron, Plus/Minus, Arrow, or Caret
Icon size
Icon background toggle
Icon Color and Icon BG Color (Custom preset)
Multi-Open — allow multiple items expanded at once
Open First — first item starts expanded
Animation Speed — Slow, Medium, or Fast
Question Font (extended controls)
Answer Font (extended controls)
SaaS and startup landing pages that need a polished, on-brand FAQ section
Product and service pages with categorised questions across billing, features, and security
Help centres and knowledge bases with searchable, filterable content
Pricing pages that address objections with rich text answers and inline CTA buttons
Ship a professional FAQ section without code, without plugins, and without compromise. One component, every feature you need, ready for production.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au
Aidan Looker
