Hero - Overhanging Pricing
A full-width hero with text and pricing boxes overhanging it.
View a live demo of this section.
Modules:
Usage Guide
The Hero - Overhanging Pricing section creates a striking visual impact by positioning pricing boxes that “hang over” the bottom edge of your hero area, creating depth and drawing immediate attention to your pricing offers. This design pattern works exceptionally well for SaaS companies and technology businesses that want to lead with pricing transparency while maintaining an elegant, professional appearance.
When you add this section to your page through the HubSpot page editor, you’ll get a full-width hero background that extends across your entire viewport, with the pricing boxes strategically positioned to overlap the hero’s bottom boundary. This creates a seamless transition between your value proposition messaging and pricing details.
Best use cases include pricing pages, landing pages for paid campaigns, and product pages where you want to highlight multiple pricing tiers immediately. The overhanging design works particularly well when you have 2-4 pricing options to display, as it maintains visual balance without overwhelming the hero space.
To customize this section effectively, use the Theme Rich Text module to craft compelling headline copy and supporting text that explains your value proposition. Keep your hero messaging concise since the pricing boxes will command significant visual attention. The Pricing Boxes module allows you to highlight your most popular plan with accent styling, which pairs perfectly with the prominent positioning this section provides.
Pro tip: This section performs best when placed at the top of your page as a primary hero, rather than lower in the content flow where the overhanging effect loses its visual impact. Consider using shorter pricing descriptions within the boxes to maintain the clean aesthetic this section is designed to deliver.