Customizing Layouts

Mar 24, 2025

We’re excited to introduce a powerful new feature in Framer Beta: the ability to target items in a CMS list by their index or position. This gives you a whole new level of control over how your CMS content is displayed—whether you want to highlight the first item, alternate row styles, or hide elements conditionally. Let’s walk through a few ways you can use this feature.

Feature the First Item in a List

Want to highlight the first card in a list? Here’s how:

  1. Set up your CMS list and select the component you want to customize.

  2. Add variants to your component—like a “default” and a “featured” version.

  3. Click into the Variant property and select “Set variable” → choose “Index”.

  4. Now, set a condition: when index = 1, show the featured variant.

You’ll immediately see the first item switch to the featured design. Change the index to 2 or 3, and you’ll see the featured card move to that position.

Hide the Divider on the First Item

Dividers between list items are great—except at the very top. To hide the divider on just the first item:

  1. Add a variable to the divider.

  2. Set the condition to “index is greater than 1”.

  3. When true, show the divider; when false, hide it.

This keeps your list clean, with dividers only appearing between items—not before the first one.

Alternate Styles for Even and Odd Rows

You can alternate variants in your list for a more dynamic layout. Here’s how to set up alternating row styles:

  1. Prepare two variants (e.g., “filled” and “non-filled”).

  2. Set a variable to “index is odd”.

  3. When true, show the filled variant; when false, show the non-filled one.

This creates a visually interesting pattern that helps guide the user’s eye through your list.

Alternate Layouts Left and Right

Another common use case is flipping the layout—such as alternating images left and right:

  1. Create two variants: left and right layout.

  2. Again, use “index is odd” as your condition.

  3. Show the left variant when the condition is true, and right when false.

Perfect for team sections, testimonials, or product features where visual variety adds polish.

Try It Out

These are just a few of the patterns you can create using index-based targeting in Framer. The possibilities go far beyond this—from creating timelines to alternating backgrounds, badges, or even custom animations based on position. We can’t wait to see what you build with it. And if you run into any issues or have ideas for improvements, we’d love to hear from you.

‹ Working with Data