Pricing Plans 01
A clean three-column pricing section with Starter, Pro, and Enterprise plans. Ideal for SaaS, AI tools, agencies, and subscription-based websites needing clear plan comparison.
Desktop
Tablet
Mobile
Section Details:
Components:
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 8.033 0.782 C 9.12 -0.304 10.88 -0.304 11.967 0.782 L 14.921 3.734 L 10 8.655 L 5.079 3.732 Z M 3.765 14.889 L 0.816 11.935 C 0.294 11.412 0 10.704 0 9.966 C 0 9.227 0.294 8.519 0.816 7.997 L 3.767 5.046 L 8.688 9.967 Z M 19.184 7.998 C 19.706 8.521 20 9.229 20 9.967 C 20 10.706 19.706 11.414 19.184 11.936 L 16.233 14.885 L 11.312 9.967 L 16.235 5.046 Z M 11.965 19.152 C 10.878 20.237 9.118 20.237 8.031 19.152 L 5.077 16.203 L 10 11.279 L 14.921 16.203 Z" fill="rgb(0, 0, 0)" height="19.96558277833454px" id="IRXqvS7EE" transform="translate(2 2.033)" width="20.000000216391754px"/></svg>)
Heading (H1) 02
Pricing Cards 01
Button 11
Code:
AvatarStack
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
Hover
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.