Unicard module Documentation for HubSpot CMS

Welcome to the Unicard module, a powerful and user-friendly tool designed to create dynamic, customizable card layouts in the HubSpot CMS. This documentation guides you through the setup and customization process, leveraging Unicard’s intuitive interface and flexible features.

 

1. Add the Unicard Module and Explore Defaults

Start by dragging and dropping the Unicard module onto your HubSpot CMS page from the module library. Upon adding, you’ll see a default group of three cards, each showcasing a unique design variation. Use this opportunity to explore the module’s capabilities by examining how these designs are configured in the editor. Familiarize yourself with the settings to understand how to replicate or modify these variations.

Unicard default three-card layout and module placement

2. Add More Unicard Instances

Need more cards? Easily expand your layout by clicking the “+ Add” link in the module interface to insert additional Unicard instances. Alternatively, duplicate existing card variants to maintain consistent styling while scaling your design. This flexibility allows you to create as many cards as your project requires.

Unicard group in two rows

3. Configure Card Group Layout and Styles

Customize the appearance of your card group in the Style tab.

In the Grid Layout section, adjust the number of columns and set the spacing (gaps) between cards to achieve your desired layout.

Unicard Grid Layout

For consistent styling across all cards, use the Card group section in the Style tab, which offers intuitive, editor-friendly options to tweak fonts, colors, borders, and more. These settings ensure a cohesive look while remaining easy to manage.

Unicard styling options.

4. Select Components for Each Card

Unicard’s standout feature is its modular component system. Choose only the components you need—such as images, text, buttons, or icons—for each card, and unused features remain hidden to keep the interface clean. This powerful yet streamlined approach allows you to tailor each card to specific use cases without navigating unnecessary settings, making Unicard both robust and user-friendly.
Unicard components

5. Customize Individual Card Content

Once components are selected, populate each card with content using familiar HubSpot CMS module fields. Add text, images, links, or other elements through an intuitive interface designed for efficiency. The content-focused fields ensure you can craft engaging, on-brand cards without wrestling with complex settings.
Unicard content editor UI

6. Preview and Publish

Before publishing, use HubSpot’s preview mode to review your Unicard layout across different devices (desktop, mobile) to ensure responsiveness. Adjust styles or content as needed. Once satisfied, save and publish your page to showcase your professionally designed cards.

Unicard’s combination of flexibility, no-code simplicity, and content-focused design makes it the ideal choice for creating impactful card layouts in HubSpot CMS. Whether you’re building landing pages, blogs, or product showcases, Unicard streamlines the process while delivering professional results. Happy designing!