FAQ List 01
Minimal dark-themed FAQ layout with numbered list and toggle answers—ideal for product sites, service pages, or support-style portfolios.
Desktop
Tablet
Mobile
Section Details:
Variables:
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z M 5.091 6.182 C 5.091 5.579 5.579 5.091 6.182 5.091 L 13.818 5.091 C 14.421 5.091 14.909 5.579 14.909 6.182 C 14.909 6.784 14.421 7.273 13.818 7.273 L 11.091 7.273 L 11.091 13.818 C 11.091 14.421 10.602 14.909 10 14.909 C 9.398 14.909 8.909 14.421 8.909 13.818 L 8.909 7.273 L 6.182 7.273 C 5.579 7.273 5.091 6.784 5.091 6.182 Z" fill="transparent" height="20px" id="bx5ZpYXbX" transform="translate(2 2)" width="20px"><path d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z" fill="rgb(0, 0, 0)" height="20px" id="IZSi1coWj" width="20px"/><path d="M 0 1.091 C 0 0.488 0.488 0 1.091 0 L 8.727 0 C 9.33 0 9.818 0.488 9.818 1.091 C 9.818 1.693 9.33 2.182 8.727 2.182 L 6 2.182 L 6 8.727 C 6 9.33 5.512 9.818 4.909 9.818 C 4.307 9.818 3.818 9.33 3.818 8.727 L 3.818 2.182 L 1.091 2.182 C 0.488 2.182 0 1.693 0 1.091 Z" fill="rgb(255, 255, 255)" height="9.818181818181817px" id="zORJGudlH" transform="translate(5.091 5.091)" width="9.818181818181817px"/></g></svg>)
Section Heading
Section Description
FAQ Question
FAQ Answer
Faq no.
Note:
You’ll see as many sets of variables as the number of FAQs you choose to include.
Icons:
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 8.689 0.756 C 8.96 0.288 9.459 0 10 0 C 10.541 0 11.04 0.288 11.311 0.756 L 19.796 15.411 C 20.067 15.88 20.068 16.458 19.798 16.928 C 19.527 17.397 19.026 17.686 18.484 17.686 L 1.516 17.686 C 0.974 17.686 0.473 17.397 0.202 16.928 C -0.068 16.458 -0.067 15.88 0.204 15.411 Z" fill="transparent" height="17.686396206080605px" id="BeGLeZ2eq" transform="translate(2 3.39)" width="20px"><path d="M 8.689 0.756 C 8.96 0.288 9.459 0 10 0 C 10.541 0 11.04 0.288 11.311 0.756 L 19.796 15.411 C 20.067 15.88 20.068 16.458 19.798 16.928 C 19.527 17.397 19.026 17.686 18.484 17.686 L 1.516 17.686 C 0.974 17.686 0.473 17.397 0.202 16.928 C -0.068 16.458 -0.067 15.88 0.204 15.411 Z" fill="rgb(0, 0, 0)" height="17.686396206080605px" id="YGKnJyVyV" width="20px"/></g></svg>)
FAQ Open
FAQ Close
Effects:
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 4.372 8.198 C 6.303 7.812 7.812 6.303 8.198 4.372 L 8.891 0.909 C 9.133 -0.303 10.867 -0.303 11.109 0.909 L 11.802 4.372 C 12.188 6.303 13.697 7.812 15.628 8.198 L 19.091 8.891 C 20.303 9.133 20.303 10.867 19.091 11.109 L 15.628 11.802 C 13.697 12.188 12.188 13.697 11.802 15.628 L 11.109 19.091 C 10.867 20.303 9.133 20.303 8.891 19.091 L 8.198 15.628 C 7.812 13.697 6.303 12.188 4.372 11.802 L 0.909 11.109 C -0.303 10.867 -0.303 9.133 0.909 8.891 Z" fill="transparent" height="20px" id="MkEHBXhs0" transform="translate(2 2)" width="20px"><path d="M 4.372 8.198 C 6.303 7.812 7.812 6.303 8.198 4.372 L 8.891 0.909 C 9.133 -0.303 10.867 -0.303 11.109 0.909 L 11.802 4.372 C 12.188 6.303 13.697 7.812 15.628 8.198 L 19.091 8.891 C 20.303 9.133 20.303 10.867 19.091 11.109 L 15.628 11.802 C 13.697 12.188 12.188 13.697 11.802 15.628 L 11.109 19.091 C 10.867 20.303 9.133 20.303 8.891 19.091 L 8.198 15.628 C 7.812 13.697 6.303 12.188 4.372 11.802 L 0.909 11.109 C -0.303 10.867 -0.303 9.133 0.909 8.891 Z" fill="rgb(0, 0, 0)" height="20px" id="TD1Mkd6rR" width="20px"/></g></svg>)
Scroll
How to use:
Click the Copy button on any Section card or preview page.
Paste it anywhere in your Framer project where you need the layout.
Adjust Text, Images, and Variants using built-in Variables.
Unlink the section for full control and deeper customization.