One module. Every hero you'll ever ship.

Overview

Hero Banner Pro is a single, self-contained section module for HubSpot CMS that becomes any hero or banner you need — a full-viewport landing-page hero, a lead-gen banner with an embedded form, an event countdown, a promo, a brand announcement, or a simple section header. It ships its own scoped styles and dependency-free vanilla JavaScript, so it works on any page, landing page or blog template, on any theme — or no theme at all. Every visible value is an editor field wired through CSS variables: there is nothing hardcoded and no CSS to write.

Installation

1. In the page or template editor, open Add → Modules and search for “Hero Banner Pro”.
2. Drag it to the top of the page for a hero, or into any section for a mid-page banner.
3. Set your content on the Content tab, choose a background, then refine everything on the Style tab.
4. Publish. There is no theme dependency and no setup step.

Backgrounds

Five background modes, each with its own controls. A separate overlay sits above image, video and gradient backgrounds to keep text legible.

• None — transparent; the section inherits whatever sits behind it.
• Solid color — any color at any opacity.
• Gradient — two colors plus an angle (0–360°).
• Image — your image with a focal position (center, top, bottom, left, right) and optional parallax.
• Video — a looping, muted, autoplaying MP4 with a poster image used for the first frame and as a mobile fallback.
• Overlay — a color wash with its own color and opacity, toggled on or off.

Content

• Logo — optional, with an optional link and a height control.
• Eyebrow — a short label above the heading, with its own letter-spacing and transform.
• Heading — with an H1 / H2 / H3 tag choice so the page keeps a correct heading outline for SEO.
• Subheading — rich text (links, bold, etc.).
• Buttons — a primary and a secondary button, each toggled and linked independently.
• Form — an embedded HubSpot form (see below).
• Countdown — a live countdown to any date and time (see below).

Embedded form

Turn on Form, pick any HubSpot form, and place it below the content or beside it as a card for a split lead-gen layout. The embedded form is fully themed from the Style tab — it inherits your brand without any custom CSS.

Form style controls

• Card — background, border color, border width, radius, padding, max width.
• Heading & labels — font family, weight, size and color for the form heading and field labels.
• Inputs — font, text color, background, border color, focus-ring color, radius, vertical and horizontal padding.
• Submit button — background, text color, radius.
• Validation — error-message color.

Countdown

Counts down to any target date and time in the visitor's local time zone, then shows an editable expired message when it passes. Every label is editable for any language.

• Target — date/time in YYYY-MM-DDTHH:MM:SS format.
• Labels — Days, Hours, Minutes, Seconds and the expired message.
• Styling — number font, label font, box background, border, border width, radius, padding and gap. Boxes render as clean squares.

Layout & height

• Height — Full viewport (100vh), Tall (80vh), Medium (60vh), Short (40vh) or Auto (fit content).
• Full-width banner — breaks the section out of its column to span the full viewport width, edge to edge, anywhere on the page.
• Alignment — horizontal (left / center / right) and vertical (top / center / bottom).
• Widths — content container max width and text-column max width.
• Spacing — top, bottom and side padding, the gap between elements, and the gap between the content and form columns in the split layout.

Typography

Each element — eyebrow, heading, subheading, buttons, form and countdown — has its own font picker that sets family, weight, size and color together, plus line-height and letter-spacing where they matter. Pick one typeface for everything or mix a display font with a clean body font. A separate mobile heading size keeps headlines sharp on phones.

Buttons

Both buttons are fully controllable — background, hover background, text color, hover text color, border color, border width, radius and padding, plus the gap between them. Pills, rounded, sharp and outline styles all come from these fields; no two demos above use the same button treatment.

Animation

• Entrance — none, fade up, fade in, slide left, slide right or scale in, with an adjustable stagger between elements.
• Heading — optional letter-by-letter reveal (words never break across lines).
• Parallax — image and video backgrounds drift as the visitor scrolls, at an adjustable strength.
• Scroll indicator — an animated arrow that smooth-scrolls to the next section on click.
• Reduced motion — all motion is automatically disabled when the visitor has prefers-reduced-motion set.

Border, radius & shadow

Round the whole section, add a section border (color + width), and choose a soft, medium or large shadow with your own shadow color — or none at all.

Responsive & accessible

• Fluid scaling — padding and font sizes scale smoothly between mobile and desktop with CSS clamp(), so there is never an awkward in-between size.
• Breakpoints — configurable tablet and mobile breakpoints, plus mobile-specific padding and a mobile heading size.
• Split → stacked — the content + form split collapses to a single stacked column on mobile.
• Semantics — a real heading tag for SEO, keyboard-operable links and buttons, an aria-label on the section, and a meaningful scroll-cue button.
• Performance — dependency-free vanilla JavaScript, scroll-synced with IntersectionObserver rather than scroll polling.

Full style control list

• Background — type, solid color, gradient (start, end, angle), image + position, video URL + poster, overlay toggle + color.
• Layout & spacing — height, full-width toggle, container max width, text width, horizontal & vertical alignment, top / bottom / side padding, element gap, split gap.
• Typography — eyebrow / heading / subheading font pickers (family + weight + size + color each), eyebrow letter-spacing & transform, heading line-height, letter-spacing & mobile size, subheading line-height.
• Buttons — per button: font + color, background, hover background, hover text, border color, border width, radius, vertical & horizontal padding; plus the button gap.
• Form — max width, card background / border / border width / radius / padding, heading / label / input fonts, input background / border / focus / radius / padding, submit background / text / radius, error color.
• Countdown — value font, label font, box background, border, border width, radius, padding, gap.
• Effects — entrance animation, stagger, animate-heading, parallax toggle + strength, scroll indicator + color.
• Decoration — section radius, border color, border width, shadow preset + color.
• Responsive — tablet & mobile breakpoints, mobile top & bottom padding.

Demo notes

• Hero (top) — full-bleed 100vh violet→ink gradient, Bricolage Grotesque 80px with a letter-by-letter reveal, white pill buttons and a scroll cue.
• Demo 2 — Brand announcement — clean white, centered, a modest logo and a single black pill CTA, Space Grotesk.
• Demo 3 — Full-bleed mid-page — edge-to-edge 100vh image with parallax, right/bottom aligned, Archivo, sharp outline button.
• Demo 4 — Lead-gen split — light-gray section, black text, content left with a white HubSpot form card right, Sora, black submit.
• Demo 5 — Launch event — full-bleed concert image, Anton condensed type, amber pill, live countdown with square boxes.
• Demo 6 — Brand statement — moody full-bleed dark image, Outfit, white + ghost buttons, left aligned.
• Demo 7 — Promo / sale — Black Friday over a retail image, Oswald, red accent, pill buttons and a countdown.