ServicesSection is a large masthead-style services list for Framer. On desktop, hovering a row reveals that service's image in a panel that follows your cursor around the list. On mobile and keyboard, clicking or tapping a row opens an inline accordion with the description and image instead — so every service stays fully reachable without a mouse. Ideal for agencies, studios and SaaS teams that want a bold, editorial way to present their offerings.
Cursor-following image preview on hover Click/tap accordion reveal for mobile & keyboard Two-column header — eyebrow, heading and side text Independent font controls for heading, title, category, description, side text and eyebrow Optional uppercase toggle for every text element Adjustable accordion open/close speed and preview size Resizable eyebrow icon Built-in schema.org structured data for SEO & AI search Fully accessible — ARIA states, visible focus ring, keyboard support Fully responsive — auto-adapts across small, mobile, tablet and desktop 5 customizable services with title, category tag, description, image and link Works out of the box — no setup needed
Use Cases
Agency & studio services pages
Consulting & professional services sites
SaaS feature and services sections
Design & development studio portfolios
Freelancer & personal brand websites
Marketing agency landing pages
B2B service listing pages
Architecture & interior design studios
Law firm & finance services pages
Editorial & magazine-style service directories
Keywords
services list, service list component, hover preview, cursor follow image, accordion services, framer services section, service showcase, agency services list, editorial services list, hover image reveal, masthead list, service card list, accessible accordion, SEO services list, no-code services component, service section, interactive services list, click reveal accordion, responsive services block, service directory framer, structured data services, schema markup
ServicesSection is a large masthead-style services list for Framer. On desktop, hovering a row reveals that service's image in a panel that follows your cursor around the list. On mobile and keyboard, clicking or tapping a row opens an inline accordion with the description and image instead — so every service stays fully reachable without a mouse. Ideal for agencies, studios and SaaS teams that want a bold, editorial way to present their offerings.
Cursor-following image preview on hover Click/tap accordion reveal for mobile & keyboard Two-column header — eyebrow, heading and side text Independent font controls for heading, title, category, description, side text and eyebrow Optional uppercase toggle for every text element Adjustable accordion open/close speed and preview size Resizable eyebrow icon Built-in schema.org structured data for SEO & AI search Fully accessible — ARIA states, visible focus ring, keyboard support Fully responsive — auto-adapts across small, mobile, tablet and desktop 5 customizable services with title, category tag, description, image and link Works out of the box — no setup needed
Use Cases
Agency & studio services pages
Consulting & professional services sites
SaaS feature and services sections
Design & development studio portfolios
Freelancer & personal brand websites
Marketing agency landing pages
B2B service listing pages
Architecture & interior design studios
Law firm & finance services pages
Editorial & magazine-style service directories
Keywords
services list, service list component, hover preview, cursor follow image, accordion services, framer services section, service showcase, agency services list, editorial services list, hover image reveal, masthead list, service card list, accessible accordion, SEO services list, no-code services component, service section, interactive services list, click reveal accordion, responsive services block, service directory framer, structured data services, schema markup
Ahmet Loca
