SmartCtaRow gives your Framer site a polished row of CTA buttons that automatically styles each action based on its importance. Mark a CTA as primary, secondary, or tertiary, and the component adjusts its size, weight, fill, border, hover behavior, and visual emphasis. It is built for hero sections, pricing cards, landing pages, feature blocks, and any section that needs multiple clear calls to action.
Supports a list of editable CTAs with ID, label, link, importance, and optional icon. Primary CTAs receive larger sizing, stronger font weight, solid or gradient fill, shadow, and more visual emphasis. Secondary CTAs can use outline or ghost styling. Tertiary CTAs appear lighter and less dominant. Hover effects include sliding background fill, lift animation, shadow change, and icon shift. Primary and secondary colors are configurable, and the component automatically calculates readable contrast text for filled buttons. Layout can be horizontal or stacked. On mobile, buttons can automatically stack vertically and become full width. Links are sanitized to allow safe http, https, mailto, tel, anchor, and relative URLs. Unsafe links are prevented from navigating. Uses real anchor tags when an href is provided and real button elements when no href is set. Includes visible focus-visible styling and respects reduced-motion preferences.
Add SmartCtaRow to your Framer canvas and create your CTA list in the property panel. Add labels, links, icons, and importance levels for each action. Set one CTA as Primary for the main conversion path, then use Secondary or Tertiaryfor supporting actions like “Learn More,” “View Demo,” or “Contact Sales.” Choose row or stacked layout, adjust the gap, pick solid or gradient primary styling, choose outline or ghost secondary styling, and set your primary, secondary, and text colors.
Hero sections, SaaS landing pages, pricing cards, product cards, feature sections, app launch pages, waitlist pages, agency websites, template previews, newsletter CTAs, download sections, onboarding pages, and any Framer project that needs a clean multi-button CTA group with clear visual hierarchy.
Spyridon Merkouris
