Your projects,
one line each.
Documentation · Version 1.0
How to feed it from a Collection List, the columns and their order, filters, the three previews, video, every setting in the panel, and five looks to start from.
01
Start here.
Add it to your project. Open the link in your purchase email (or the Marketplace page) and drop CMS Project Index on a page. It arrives with a demo index so you can see it work.
Feed it projects. Add a Collection List of your projects, put an Index Item inside its item and connect its fields. The next section shows how.
Pick a preview. The photo follows the cursor, sits beside the list, or opens in the row.
Preview. Hover a row, sort a column, pick a discipline. On a phone, a tap opens the row.
02
How it works.
The component turns a list of projects into the index of a studio site: one line per project, with its number, title, place, discipline and year in columns.
A tap on a column sorts by it; a second tap turns the order around. No. goes back to the list’s own order.
A button per discipline, with a count, and a count of the projects that match.
The project’s photo, or its video, follows the cursor, sits beside the list, or opens in the row with a summary and a link.
The photo always opens in the row, because there is no cursor to follow.
The component makes no network requests of its own. A photo loads the first time its project is shown, and a video plays only while its project is the one on show.
Live component with the demo projects. Hover a row, sort a column or pick a discipline.
03
Projects from a Collection List, step by step.
Add a Collection List of your projects anywhere on the page.
Put an Index Item inside its item and connect its fields: Title; · Place, a city or a client; · Discipline, a category (for an Option field, pick Display option); · Year, a text or number field, or leave it empty and connect a Date: its year shows; · Image, and an optional Video from a File field; · Summary, a sentence for the split and in-the-row previews; · Link, usually the item’s own CMS page.
Select the index, set Source to CMS and use the same Kit name as the Index Items (“index” by default on both).
Preview. Every item becomes a row.
On the published site, Index Items show nothing and take no space. Set the Collection List’s gap and padding to 0. In the canvas, each Index Item shows a small dashed label like “Index Item · Red Hour · Fashion · 2026”.
Good to know:
Order sets where the index starts: as in the list, newest first, oldest first or A to Z. Sort the Collection List itself for any other order.
Framer’s own Collection List filters work too: the index shows what the list shows.
Leave the Collection List’s limit high enough to include every project, and use Max rows on the index for a short teaser.
Numbers follow the list’s order, so a project keeps its number however the index is sorted.
04
Previews
The photo trails the pointer and leans a little with its speed. Near the right edge it moves to the left of the pointer, and it never leaves the index. Photo width sets its size and Photo tag shows the discipline and year on it.
The list on the left and the photo fixed on the right, with the summary, place and year under it. The first project shows before any hover, and the last one hovered stays. Photo column sets its share of the width. On a touch screen, the first tap shows a project and the second follows its link.
A tap opens the row with the photo, the summary and View project. One row is open at a time.
Narrower than this, the index always opens in the row. The cursor preview also falls back to the row on touch screens.
4:5, 3:4, 1:1 or 16:9, for every preview.
The rest of the rows fade while one is hovered.
05
Customize the look.
Columns
Turn Number, Place, Discipline, Year, the Header and the Count on or off, and rename every header label. On narrow screens Discipline goes first, then Place, so the title keeps its room.
Colours
Ink, Muted (numbers and disciplines), Lines, Accent (the count, the hovered number, the photo tag) and Photo fill (behind photos while they load). Button text is the text on the selected filter, which takes the Ink colour. Pick your site’s colour styles so the index follows your palette and dark mode.
Type
Title font for the project titles, with Uppercase for condensed display fonts like Anton. Its size is the largest a title gets; on narrower screens titles scale down with the index. Text font for everything else.
Recipes
Preview Cursor · Order As in the list · Title font Anton, Uppercase · Filters on
Max rows 5 · Order Newest first · Header off · Filters off · Place off
Preview Split · Photo shape 3:4 · Photo column 45% · Discipline off
Preview In the row · Photo shape 16:9 · Summary connected
Ink and Muted in your light colour · Lines semi-transparent · Button text in your dark colour
06
Settings reference.
In the order they appear in the property panel. Settings that don’t apply are hidden.
Content
CMS (Index Items with the same Kit name) or Manual.
CMS: the name shared with the Index Items.
Manual: Title, Place, Discipline, Year, Image, Video, Summary and Link. Up to 60.
Preview
Preview — Cursor, Split or In the row.
In row below, Photo width, Photo column, Photo shape, Photo tag, Dim others.
List
Order — As in the list, Newest first, Oldest first or A to Z.
Sort by column, Filters, Count, Header, Number, Place, Discipline, Year, Max rows.
Look
Ink, Muted, Lines, Accent, Photo fill, Button text.
Title font, Uppercase, Text font.
Labels
Number, Project, Place, Discipline and Year labels.
All label, Project word, Projects word, View label.
List name, Filters name, Sort name, Ascending, Descending — what screen readers hear.
New tab note, When empty.
All of them are translated by Framer Localization.
Index Item
Kit name, Title, Place, Discipline, Year, Date, Image, Video, Summary, Link.
07
Performance
No network requests of its own, no scripts from other sites, no tracking.
A photo loads the first time its project is shown; the rest wait. Images come from Framer’s own srcSet, at the size the preview needs.
A video plays only while its project is on show, muted and in a loop.
The cursor photo moves from the animation frame, without re-rendering the index, and stops when it arrives.
On the canvas and in Framer’s static previews, the index shows as a plain list, without the cursor photo or transitions.
08
Accessibility
Rows are real links, or buttons when they have no link or open in the row; they say whether they’re open.
Keyboard focus on a row shows its photo, like a hover.
Closed rows can’t be reached with the keyboard; an open one can.
The header buttons say which column is sorted and in which direction.
The filters are buttons that say which one is pressed, and the count is read out when it changes.
Links to other sites say they open in a new tab.
Visitors who prefer reduced motion get the photo without the trail, the lean or the fades.
09
Troubleshooting
Source is on Manual with no projects of your own. Set Source to CMS and add Index Items.
No Index Item uses the index’s Kit name, or the items have no title and no image.
The Option field was connected without Display option.
Connect Year to a text or number field, or connect your Date field to Date.
The index is narrower than In row below, or the screen is a touch screen: there the photo opens in the row.
Fewer than two disciplines, or Filters is off.
Set its gap and padding to 0.
10
Updates
New versions are free and listed here. To update, insert the index again from the Marketplace page or from the link in your order, which always points to the latest version, and copy your settings across. The Index Items you already connected keep working: newer indexes read them.
1.0 · November 2026 — First release: projects from a Collection List or the panel, columns that sort from the header, filters with counts, cursor, split and in-the-row previews with video, year from a Date, max rows, phones and touch screens, keyboard and screen reader support, and full documentation.
11
Support and licence.
Questions or a bug? Write to info@miguelrecio.es. A person replies within two business days (Mon–Fri, CET).
One licence covers one website or project, the same Single-Use licence as Framer’s Marketplace. For several sites, buy one licence per site. Reselling or redistributing the component isn’t allowed.
The demo photos are samples. Replace them with your own before you publish.
Questions? Get in touch.
Email info@miguelrecio.es with your question and a link to your project.