Index variable for CMS items
In this Framer tutorial, you will learn Index variable for CMS items. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
How can I make the first card in a CMS grid span two rows or columns in Framer?
To make the first card span two rows or columns, select the item in your grid, then use the columns or rows property. Click the plus to set a variable, choose the ’index’ variable, set it to ’equals’ and enter ’1’. Then set the span value to ’2’. This will make the first item span two rows or columns, depending on which property you use. You can also change the index value to target other positions.
How do I alternate component variants based on the position of CMS items?
You can alternate component variants by using the index variable in combination with the variant property. Select the item, go to the variant property, click plus to set a variable, choose ’index’, and then select ’is odd’. Set the variant for ’yes’ (odd positions) and another for ’no’ (even positions). This creates an alternating layout, such as switching between left and right image alignment or filled and non-filled backgrounds.
Is it possible to show dividers only between CMS items and not before the first item?
Yes, you can control dividers by using variants. Create two variants: one with a divider and one without. In your list, select the first item, add an index variable, set it to ’equals 1’, and choose the variant without the divider. This way, the divider is only shown between items and not before the first item.
Lesson details
Apr 17, 2025
5:46
