Framework Plus Documentation

Call to Action Box

A styled box that includes call to action text and button.

View a live demo of this module.

Content

  • Add up to 2 buttons
  • Change position of the button (left, right, bottom, bottom full width)

Styles

  • Change the background, border, and padding
  • Change the text alignment on both desktop and mobile
  • Set to Dark Mode

cta-box

How to Use This Module

The Call to Action Box module serves as a conversion-focused element that draws visitor attention to your most important actions, whether that’s signing up for a demo, downloading a resource, or starting a free trial. This module works particularly well on landing pages, product pages, and at strategic points throughout your website where you want to drive specific user behavior.

To add this module to any page, simply drag it from the module library in the HubSpot page editor onto your desired location. The Framework theme’s clean design ensures the CTA box integrates seamlessly with your existing content while maintaining visual prominence.

Strategic placement is key to maximizing conversions. Consider positioning CTA boxes after explaining a key benefit, at the end of blog posts to capture engaged readers, or as a standalone section on your homepage. The two-button option is particularly useful when you want to offer both a primary action (like “Get Started”) and a secondary option (like “Learn More”).

The button positioning options give you flexibility to match your page layout. Use left or right alignment when the CTA box sits alongside other content, while bottom positioning works well for centered, standalone placements. The full-width bottom option is ideal for mobile optimization, ensuring buttons remain easily tappable on smaller screens.

Dark mode compatibility makes this module versatile across different page designs. When your page uses darker sections or you want to create visual contrast, toggle dark mode to automatically adjust text colors and styling for optimal readability.

Remember to customize the background and border styles to align with your brand colors, which you can set in the Framework theme’s global settings or override at the module level.