Modules Overview

Please read this overview before using any module in Act3. It helps you understand the structure and settings of the modules, and makes it easier to use them.

Content vs Styles

Each module has everything organized under the Content tab, including content, settings, styles, and more. The Styles tab is empty mainly because Act3 uses an extra breakpoint (medium screens / tablet), and some options are limited to the Content tab.

If you don’t see options under the Styles tab, it doesn’t mean style options are missing. You’ll find them under Content › Wrapper, as explained below, or under Content › Settings for module-specific styles. Some options may also be grouped elsewhere for certain elements.

Learn how to Edit content in the content editor in HubSpot.

Module structure

Most of the theme modules are structured as follows:

1. Content
2. Settings
3. Wrapper

1Content

Module fields are used to populate the module with your own content. Important content fields are placed at the top, before any settings or styles, so you can add content quickly and easily.

Some modules include Repeaters, which means an item can be repeated, each with its own content. For example, you can use the Button module to include multiple buttons, or add multiple cards in a card module. All items in a Repeater can be manually reordered, cloned, or deleted, unless a minimum number of items is required.

2Settings

Apart from the content and individual component settings, most advanced settings and styles—or settings that apply to all sub-components of a repeater—are grouped under Settings. Depending on the module, this may include column options, slider functionality, color schemes, and more. This group may be omitted in very simple modules that contain only a few fields.

3Wrapper

This is where the custom module wrapper styles are located, including padding, margin, text and block alignment, and other wrapper-specific settings:

Take a look at this quick demo showing how this works:

This is a great way to make the most of the built-in tools and unleash your creativity. With this approach, you go beyond the section's alignment and spacing styles and gain the freedom to adjust the width or spacing of individual modules within a section without affecting the rest of the content. This gives you much more control over the page's design and layout.

This is also useful when you want the section background to span behind all modules within it. Wrapper styles are handy for adjusting the width and spacing of individual modules. Here are the Maximum width and Block alignment settings in action:

This structure is consistent across most theme modules. However, in rare cases, some modules may not include this group at all, while others may include specific styles—such as text alignment—that override these wrapper settings.

All wrapper styles are available for three screen sizes: Large screens, Medium screens, and Small screens. Following a desktop-first approach to maintain consistency with HubSpot's layout and tools, styles inherit downward. This means if you set the text alignment for large screens but do not specify it for medium or small screens, those sizes will inherit the large-screen alignment:

There are also two fields where you can specify a Custom ID or Custom class that will be applied to the module wrapper. This can be useful for developers who want to apply custom styles to a specific module, or if you want to add an anchor that scrolls to the module: