---
title: "Category Accordion — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Accordions. What is Category Accordion?"
canonical: "https://framer.elliotli.dev/component/category-accordion"
---

[Home](/)/[Components](/components)/[Accordions](/components/category/accordions)/Category Accordion

# Category Accordion

Interactive accordion cards with hover.

[View on Framer](https://framer.com/marketplace/components/category-accordion/?via=elliot-li)

![Category Accordion preview image 1](https://framer.elliotli.dev/og/component/category-accordion/205ec99d28ab020a/1600x1200.jpg)

## Summary

What is Category Accordion?

## Description

## What is Category Accordion?

Category Accordion is a premium hover-activated accordion component that transforms static category grids into dynamic, immersive browsing experiences. Each card expands on hover to reveal a glassmorphism content panel with title, description, and CTA — complete with smooth spring-based transitions and a subtle Ken Burns zoom. Ideal for photography portfolios, agency service pages, restaurant menus, real estate listings, and any layout that benefits from visual-first category navigation.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Hover-driven accordion with configurable expanded width and smooth spring-curve transitions
    
-   Glassmorphism content panel with backdrop blur, staggered text entrance, and slide-fill CTA button
    
-   Ken Burns background zoom on the active card for cinematic depth
    
-   Vertical and horizontal content layout modes with toggleable accent divider
    
-   Full color system — six independent color controls including CTA button and divider
    
-   Independent font controls for title, description, and CTA with font picker integration
    

## Controls inside Framer

### Categories

-   Title, description, CTA text per card
    
-   Responsive image upload per card
    
-   Optional link per card (opens on click)
    

### Layout

-   Expanded width (25–60%)
    
-   Border radius (0–32px)
    
-   Gap between cards (0–8px)
    
-   Content layout: Vertical or Horizontal
    

### Colors

-   Inactive overlay
    
-   Active overlay (glassmorphism panel)
    
-   Title text
    
-   Description text
    
-   CTA button
    
-   Divider
    

### Typography

-   Title size (20–64px)
    
-   Description size (10–22px)
    
-   Collapsed title size (12–28px)
    
-   Title font
    
-   Description font
    
-   CTA font
    

### Animation

-   Speed: Fast, Medium, or Slow
    
-   Ken Burns zoom toggle
    
-   Stagger text toggle
    

### Toggles

-   Show/hide description
    
-   Show/hide CTA button
    
-   Show/hide accent divider
    

## Best use cases

-   Photography and creative portfolios — showcase collections with visual-first navigation
    
-   Agency and studio service pages — present service categories with immersive hover reveals
    
-   Restaurant and hospitality menus — display cuisine types, room categories, or experiences
    
-   E-commerce category landing pages — drive exploration through visually rich category browsing
    

Every interaction is spring-animated and every color is customisable. Drop it in, connect your content, and ship a page that holds attention.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #8290

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-05-12
- **Updated**: 2026-06-13
- **Added**: 2026-05-05
- **Categories**: Accordions

## More like this

-   [Fold Rows](/component/fold-rows) — H SHIFT WORKS · Free — Accordion for FAQs and services
-   [FaqX Faq Accordion](/component/faqx-faq-accordion) — Themomarket · $8 — Accordion FAQ Section
-   [FAQ - Minimal](/component/faq-minimal) — VectorFlow Studio · $3 — Interactive dark mode FAQ stack
-   [FAQ Accordion Search](/component/faq-accordion-search) — Russet Supply · $5 — Searchable FAQ accordion with categories