Pricing Cards Documentation

Installing the Module

To get started with the Pricing Cards module, first, ensure you have installed it from HubSpot's marketplace. Once installed, navigate to your HubSpot dashboard and locate the module in the Other Modules section, labeled "Pricing Cards." Simply drag the module onto the desired area of your page where you want it to display.

Default Content

Upon adding the Pricing Cards module to your page, you'll notice that it comes pre-loaded with default content. This includes placeholders for plan names, descriptions, pricing information, and a default list. Additionally, the module will automatically inherit colors from your HubSpot brand kit, allowing you to quickly establish a cohesive design.

Content Tab

In the Content tab of the Pricing Cards module, you have complete control over the customization of your pricing cards. Here, you can add anywhere from 1 to 4 cards, each representing a different pricing option. Simply click the "Add" button to create a new card or clone one of the default cards to get started. Once created, click into each card to adjust its content, including plan details, descriptions, pricing information, and more. Within the settings group, you can configure various options such as the toggle switch for monthly and annual pricing, layout preferences (1-4 cards), and whether the module should display only one group of cards or both monthly and annual pricing options with a toggle switch.

Styles Tab

The Styles tab provides you with the flexibility to customize the appearance of your pricing cards to match your brand's aesthetic. Here, you can adjust the styles of the toggle switch, cards, and card content. Modify attributes such as colors, fonts, borders, and more to create a visually appealing display that aligns with your brand identity.

Mobile Optimization

Rest assured that the Pricing Cards module is built using responsive web design best practices, ensuring that your pricing displays look great on all devices, including mobile phones and tablets. The module seamlessly adapts to different screen sizes, with the cards stacking vertically on top of each other for optimal viewing on mobile devices. This ensures that your pricing information remains easily accessible and visually appealing, regardless of the device your visitors are using.