FAQ Image Accordion: Premium Sections Component by Aidan Looker

A premium FAQ accordion with a built-in image and video panel that responds to user interaction. Desktop and mobile variants included. Five style presets, markdown answers, and structured data for SEO — production-ready in seconds.

What is FAQ Image Accordion?

FAQ Image Accordion pairs an interactive accordion with a dynamic media panel that transitions between images and videos as users expand each question. Desktop variant shows a side-by-side layout with media; mobile variant displays a clean, full-width accordion. Built with animated transitions, markdown-rich answers, and FAQPage schema markup for search visibility.

Core Features

Desktop and mobile variants with a single toggle — desktop shows image/video alongside the accordion, mobile shows a streamlined accordion-only layout
Per-item image and video support — assign a unique image or video file to each FAQ item, with smooth crossfade transitions between them
Five style presets (Dark, Light, Indigo, Emerald, Custom) with full color override controls when using Custom mode
Three accordion layout styles: Cards with hover states, Dividers with accent bars, and Minimal for a clean look
Built-in markdown rendering for answers — supports bold, italic, inline code, links, and ordered/unordered lists
FAQPage JSON-LD schema output for Google rich results, toggleable on/off
Video autoplay toggle — loop videos silently on load, or show native playback controls for manual viewing
Four icon styles (Chevron, Plus/Minus, Arrow, Caret) with optional icon background and custom color controls

Controls inside Framer

FAQ Items

Question text
Answer text (markdown supported)
Image (responsive image picker)
Video (file picker, video formats)

Layout and Style

Layout Style: Cards, Dividers, Minimal
Style Preset: Dark, Light, Indigo, Emerald, Custom
Image Side: Left or Right
Variant: Desktop or Mobile

Colors (Custom preset)

Background, Question Text, Answer Text, Accent, Accent Soft
Card BG, Card Border, Card Hover (Cards layout only)
Divider Color (Dividers layout only)

Card Style

Border Radius
Padding
Gap

Image Style

Border Radius
Fit: Cover or Contain
Shadow: On or Off

Accordion Icon

Icon type: Chevron, Plus/Minus, Arrow, Caret
Size
Background toggle
Icon Color (Custom preset)
Icon BG Color (when background is on)

Behavior

Open First: expand the first item on load
Animation Speed: Slow, Medium, Fast
Autoplay Videos: loop muted or show controls

Features

SEO Schema: FAQPage JSON-LD toggle

Typography

Question Font (extended controls)
Answer Font (extended controls)

Best use cases

SaaS product pages and landing pages — pair each FAQ answer with a relevant product screenshot or feature demo video
Pricing and support pages — address common objections with visual proof alongside each answer
Portfolio and agency sites — use the media panel to showcase work samples contextually within a FAQ section
Documentation and onboarding flows — embed tutorial videos or annotated screenshots next to step-by-step instructions

Ship a polished, conversion-focused FAQ section that does more than just answer questions — it shows.