Skip to content
  • There are no suggestions because the search field is empty.

Act3 HubSpot CMS Theme - Module Detail Overview

Detailed review of every module available in the Act3 HubSpot CMS theme.  Each module entry summarises what the module does, its performance impact, where it can be used, the reserved class names and any important notes.  Where necessary, key cautions (such as image optimisation or lazy‑loading) are included.

Act3 Documentation Source

Structural & Navigation Modules

  • Pillar navigation – Used to navigate long pillar pages; shows a table of contents and a scroll progress indicator.  Only available in the Pillar template; its reserved class is pillar-nav and it loads pillar-nav.css and pillar-nav.js .

  • Pricing – Lists pricing plans in multiple columns/rows and optionally offers a toggle (e.g., monthly vs annual).  Low impact unless using HubSpot CTAs; available on pages; reserved class pricing; loads pricing.css and pricing.js .

  • Properties – Displays small icons with inline text to highlight features or quick facts.  Low impact unless using large image icons; uses class properties and properties.css .

  • Quick action – A horizontal box containing a title, description and button for quick navigation.  Low impact if images are optimised and lazily loaded; available in pages; class quick-action; uses quick-action.css .

  • Quick features – Displays icons and short text in multiple columns/rows.  Impact is low unless unoptimised images are used; class quickfeat; uses quick-features.css .

  • Quote – Shows one or more quotes/testimonials in columns or a slider.  Low impact unless large images or heavy content are added; class quote; loads compact-card.css and quote.css plus Splide files if slider is enabled .

  • Review – Displays customer reviews with star ratings and optional slider.  Low impact unless heavy images are used; reserved class review; uses review.css and Splide resources when the slider is enabled .

  • Rich text – A versatile rich‑text block with options for boxed/unboxed and collapsible content.  Low impact depending on content; class rtext; no extra files unless collapsed content is used (rich-text-collapsed.css and .js) .

  • Scroll to – Simple link that scrolls to another section on the page.  Low impact; class scroll-to; uses scroll-to.css .

  • Section extra settings – Provides additional section background options (images, videos, angled overlays).  Low impact unless large media is used; class section-bg; uses section-extra-settings.css .  Only one instance should be used per section to avoid conflicts .

  • Section intro – Creates a large section heading with a subtle overline.  Low impact unless heavy content is added; class section-intro; uses section-intro.css .

  • Sharing – Simple social link buttons (Twitter, Facebook, LinkedIn).  Low impact; class sharing; uses sharing.css .

  • Shifter – Presents content (image, rich text or form) one at a time via a quick menu, allowing comparisons or step‑by‑step reveal.  Impact depends on content; can be medium/high if forms or heavy resources are used; class shifter; uses shifter.css and shifter.js .

  • Side menu – Lists a menu in the page sidebar.  Low impact; class side-menu; uses side-menu.css .

  • Site search – An icon that triggers a full‑screen search overlay; only used in headers.  Low impact; not available as a page module; class site-search; uses site-search.css and site-search.js .

  • Steps – Guides visitors through steps with numbered circles and descriptions.  Low impact unless heavy content is inserted; class steps; uses steps.css and steps.js .

  • Tabs – Shows one piece of content at a time via tabbed navigation.  Low impact unless heavy media is used; class tabs; uses tabs.css and tabs.js .

  • Team card – Introduces team members with image, name, title and social links.  Available as a Listing card type.  Low impact but can become medium/high with many cards or unoptimised images; class team-card; uses team-card.css and Splide resources for slider .

  • Timeline – Highlights company milestones with a vertical timeline layout.  Low impact unless unoptimised images are used; class timeline; uses timeline.css .

  • Video – Embeds or plays HTML5 videos in various modes (player, lightbox or embed).  Impact varies widely; can be high if large files or auto‑playing videos are used.  Uses video.css and video.js; class video; best practice is to optimise poster images and compress MP4 files .

  • Blog configuration – An advanced module for customising new blog listing and post templates.  It does not add code to the page (low impact).  Only available in blog listing/post pages; reserved class and resources are None.  Introduced in version 31 with new templates; older templates won’t support this module .

Additional Modules (previously summarized)

Earlier modules such as Accordion, Blog card, Box over image, Button, Column navigation, Compact card, Comparison table, Contact box, Content card, Cover card, Feature card, Features showcase, Form, Gallery, Go card, Heading, Hero slider, Icon, Image, Image box, Image plus text, Language selector, Listing, Logos, Mobile navigation, Modal, Multi address, Navigation, and Numbers were reviewed in a previous context.  They cover use cases ranging from FAQ accordions and blog post listings to multi‑address displays, mega menus and number highlights; most have low performance impact when media is optimised and lazy‑loading is enabled .  Each module specifies its reserved CSS class and provides links to its CSS/JS resources; many caution against using large, unoptimised images or CTAs above the fold .

Key Takeaways

  • Performance considerations – Almost all modules emphasise using optimised SVGs or compressed images and enabling lazy loading to maintain page speed .  Modules with sliders or forms may have medium/high impact; use them sparingly and avoid above‑the‑fold placement.

  • Reserved classes & resources – Every module reserves a specific CSS class (e.g., pricing, team-card) and identifies the CSS/JS files it loads.  When building custom styles, use these classes for targeting.

  • Availability – While most modules can be used on any page, some (e.g., Pillar navigation, Site search, Blog configuration) are restricted to specific templates or header areas .

  • Editing advice – Many modules include wrapper settings for spacing, backgrounds or alignment.  The documentation cautions against using padding/margin for alignment and suggests using theme options or wrapper settings instead.