Introduction

The Custom Accordion component for Framer is a powerful tool for anyone looking to streamline their FAQs or organize content within a Framer project. It’s especially great for users who aren’t deeply familiar with Framer, allowing them to effortlessly add as many questions and answers as they need without having to mess with complex component linking. This component handles all the connections automatically, letting you focus solely on your content.

Auto-Linking Questions & Answers

One of the best features of Custom Accordion is its ability to automatically create and link as many questions and answers as you need. No more manually linking components in Framer. Simply click Add from the dropdown control and you’re good to go. This is perfect for building FAQs across templates, especially for users unfamiliar with Framer, allowing them to focus on content rather than technical setup.

Background Color

Easily customize the background color to match your overall design. Whether you prefer a sleek, dark theme or a bright, minimal look, Custom Accordion gives you full control to seamlessly blend the accordion into your project.

Hover Color

Give your users interactive feedback with a custom hover color that changes when they mouse over each question. This enhances the user experience and adds a more dynamic feel to your design.

Border Size & Color

Adjust the border size and color to define how your accordion sections stand out. Whether you’re after a thin, minimalist style or a bold outline, these settings give you complete control to match your project’s aesthetic.

Border Radius

Soft, rounded corners or sharp, clean edges? The choice is yours. Customizing the border radius lets you tailor the component’s shape to fit the look you’re aiming for with just a quick adjustment.

Fonts & Text Colors

Choose your preferred fonts and text colors for both the questions and answers. Whether you want everything to match your brand’s typography or have answers stand out with different colors, Custom Accordion makes it easy to get the perfect look.

Icons

Add a visual touch by selecting custom icons for your questions and answers. This makes it clear when an item is expandable or collapsed, giving users a more intuitive interface. Stick with the default SVG icons, or upload your own.

Font Size

Control the font size of both questions and answers to ensure readability and a balanced layout. Whether you want bold, large text or something more understated, adjusting these sizes guarantees a clean and consistent design.