Heroes & Banners

Full Hero

Full-width hero module. Content is centered or left-aligned over a background that can be a solid color (light, dark, primary, secondary, or custom), an image, or a video.

Fields

  • Eyebrow — Small label above the heading. Use for category, announcement type, or page context.
  • Heading — Main H1. Keep under 10 words for impact.
  • Heading tag — H1 or H2. Always use H1 on the homepage hero.
  • Subheadline — Supporting text below the heading. One to two sentences max.
  • Primary CTA — Main conversion button. Label, URL, and style (uses theme button tokens).
  • Secondary CTA — Optional secondary action. Ghost style by default.
  • Background type — Light, Dark, Primary, Secondary, Image, or Video.
  • Background image — Shown when background type is Image. Uses HubSpot image picker.
  • Video URL — MP4 URL for background video. Falls back to background image on mobile.
  • Hero height — Small (400px), Medium (500px), Large (600px), or Full viewport.
  • Content alignment — Center or Left.

Split Hero

Two-column hero with a text column and a media column. Media can be an image, MP4 video, or YouTube/Vimeo embed.

Fields

  • Eyebrow, Heading, Heading tag, Subheadline, Primary CTA, Secondary CTA — Same as Full Hero.
  • Media type — Image, Video (MP4), or Embed (YouTube/Vimeo URL).
  • Media side — Right (default) or Left.
  • Split ratio — 50/50, 60/40, or 40/60.
  • Background type — Light, Dark, Primary, Secondary, or custom color.

Video Background Banner

Autoplay background video with overlay content. Video is muted and loops by default. Falls back to a poster image on mobile and in browsers that block autoplay.

CTA Banner

Conversion-focused banner module. Two layouts: Centered (heading, subtext, and buttons stacked) and Split (heading/subtext on the left, buttons on the right).

Split CTA

Two-column CTA with a content column and a supporting column. Useful for pairing a conversion ask with a trust signal (testimonial snippet, logo grid, or stat).

Announcement Bar

Site-wide bar rendered above the global header. Controlled via the global module — edit once to update every page. Two scroll modes: Static (pinned) and Marquee (scrolling text). Includes an icon field, message text, and optional CTA button.