---
title: "Index Grid Section — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Ahmet Loca · Sections. Index Grid Section IndexGridSection is an editorial \"table of contents\" style grid for Framer."
canonical: "https://framer.elliotli.dev/component/index-grid-section"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Index Grid Section

# Index Grid Section

Editorial hover grid for services

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

![Index Grid Section preview image 1](https://framer.elliotli.dev/og/component/index-grid-section/0cd74d31c5b04d8d/1600x1200.jpg)

## Summary

Index Grid Section IndexGridSection is an editorial "table of contents" style grid for Framer.

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

**✦ Browse +38 FREE + 85 premium components:** [**https://frameze.com/components**](https://frameze.com/components)

**✦ Get everything for one price:** [**https://ahmetloca.dub.link/allcomponents**](https://ahmetloca.dub.link/allcomponents)

## **About Index Grid Section**

IndexGridSection is an editorial "table of contents" style grid for Framer. Hairline-bordered cells fill with an inverted color sweep on hover, revealing an image, video or description — ideal for services, capabilities or work index pages, ready with zero extra styling. Built with native property controls, semantic HTML and [schema.org](http://schema.org) markup for stronger structure and search visibility.

Hover-fill reveal with inverted color sweep per cell Optional image or video background revealed on hover Independent font pickers for heading, title, description, number, side text and eyebrow Per-element uppercase toggles for full typographic control Cell number, media and description each independently configurable Adjustable columns and four cell shapes: square, 4:3, 3:2, wide Fully responsive — auto-collapses columns on tablet and mobile Demo Mode — live on-canvas preview of shape, columns and media Show Media Preview — reveal every cell's media at once Accessible by default — semantic HTML and [schema.org](http://schema.org) structured data Works out of the box — no setup needed

**Use Cases**

Agency capability and service index pages

Studio and portfolio work index

Consulting service listings

SaaS feature index sections

Editorial and magazine-style tables of contents

Product or catalog index pages

Team or department overview grids

Design system or component index pages

Conference or event program listings

Corporate "what we do" sections

Nonprofit and organization program listings

**Keywords**

index grid, table of contents grid, hover reveal grid, capabilities grid, services grid, editorial grid, hover expand grid, image hover reveal, video hover reveal, framer index component, css grid hover, accessible grid, responsive grid framer, hover fill effect, capability showcase, services showcase

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

-   All · #4977

## Details

- **Author**: Ahmet Loca
- **Price**: $4.00
- **Published**: 2026-07-17
- **Updated**: 2026-09-30
- **Added**: 2026-07-17
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes