The new Index variable for CMS lists unlocks layout options that weren't possible before in Framer. You can now make the first card span two rows or columns in a grid, alternate between left and right layouts, or show dividers only between items. This addition gives you precise control over how your CMS content appears, letting you create magazine-style layouts with featured articles, alternating card designs, and conditional styling based on item position. Edo walks through five practical examples showing how to use the Index variable with component variants for maximum flexibility.
Example project: https://cms-layouts.framer.website
Update page with all improvements: https://www.framer.com/updates/cms-index-variable
0:00 Introduction
0:45 First card spanning two rows
1:50 First card spanning two columns
2:30 Featured variant for first article
3:20 Alternating left/right layouts
4:15 Even/odd background fills
4:55 Dividers between items only
Topics covered: responsive design, dynamic CMS layouts, UI patterns
🌞 Start for free: https://framer.link/yt
📚 Learn more at: https://framer.link/yt-academy
💎 Join the Community: https://framer.link/yt-community
🎉 Follow on X: https://framer.link/yt-x
