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.
Component Features
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.
Gap Size
Control the gap between the question cards with ease.
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.
Open Color
Choose a color for open states to maintain your design's style and help users clearly distinguish the open question card.
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 Width & Color
Customize the border size and color to make your accordion sections stand out. Adjust the width for all sides at once or fine-tune each side individually (Top, Right, Bottom, Left) 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.
Padding
You can control both the Question and Answer field padding with native Top, Right, Bottom, Left controls.
First Card Open
If the toggle is set to "Yes", the accordion's first item is open by default. Closing the card or interacting with the accordion resumes normal behaviour until the page is refreshed and the first card is open again.
Instant Transitions
You can choose to toggle between smooth and instant transitions for the accordion's behaviour.