Styling lists in Framer: A comprehensive solution for nested lists and cms connected lists

Aug 23, 2024 • 4 min read

Learn how to create nested bulleted, numbered lists and more, enabling you to color markers, add images, and create dynamic lists effortlessly and seamlessly integrated with CMS. This solution provides a robust approach for designers struggling with Framer's native list, offering advanced functionality beyond framer's current capabilities.

Key features of the Text Lists Component

Create nested lists.
Style markers with a broad range of available options:

Bulleted, Numbered, Roman and more..
Custom content marker
Image marker

Seamless CMS integration.

Setting up your CMS collection

Before diving into the component, ensure you've set up your CMS collection in Framer. Add the necessary fields. For a deeper dive into CMS collections and components, check out our detailed guide.

Importing the Text Lists Component

Copy the Text Lists component to your clipboard.
Use ⌘+V (Cmd+V) to paste the component onto your Framer canvas.
Position the component as desired within your design.

Note: This component can't be used within a CMS-formatted text field. For mid-content lists, use separate formatted text fields before and after the component.

Crafting your list content

Creating list content is straightforward. Type your items, using Shift+Return to move to the next line (creating a new list item). To nest items, simply add spaces at the beginning of a line. Each space will nest the item deeper. For CMS integration, you can use "\n" to represent line breaks, which is essential for connecting with plain text CMS fields.

Key takeaway:

Use Shift+Return to create new list items.

Add spaces at the beginning of a line to nest items deeper.

Utilize "\n" for line breaks, crucial for CMS integration.

Styling Your Lists

With your content in place, it's time to dive into styling. The number of items in your Lists property should match your nesting levels. You have a lot of list marker options at your disposal to choose like bullets, numbers, or roman numerals; add custom images as markers; adjust indent, gap, and spacing; use custom content like emojis or HTML characters as markers; and even color each marker independently.

Key takeaway:

Adjust the number of items in the Lists property to match your nesting levels.
Explore styling options.

Connecting to CMS

To link your styled lists with CMS content, create a plain text field in your CMS (for example, named "List"). Use "\n" for line breaks in your CMS content and maintain consistent spacing for nesting.

Finally, connect the component's content variable to your CMS "List" field. This connection brings your dynamic content to life within your beautifully styled lists.

Troubleshooting common issues

For best results, maintain consistent nesting levels across your CMS collections. This consistency helps ensure proper rendering across all your content. You might consider adding extra list items to account for varying dynamic list lengths.

Framer doesn't currently support CMS variables for arrays, which limits how much control you can have over styling each array property based on CMS fields.

Unlock advanced list functionality

Ready to step up your Framer lists? Purchase the Text Lists component from our store to elevate your design capabilities.

People found this article useful