One component. Every hero you'll ever ship.

Overview

Hero Banner Pro is a hero and banner section for Framer. Use it as a full-height landing hero, a lead-gen banner with a form, an event countdown, a promo, a brand announcement or a simple section header. It carries its own scoped styles and has no dependencies. Every visible value is a property control, so there is no CSS to write.

It is the Framer version of the Studio Nope HubSpot module of the same name, with the same settings and the same defaults.

Installation

1. After checkout, copy your component link.
2. In your Framer project, click the canvas and paste (Cmd+V / Ctrl+V). Hero Banner Pro appears in Assets.
3. Drag it onto a page and set Width to Fill. Height is Auto.
4. Edit it in the properties panel: pick Mode, fill in the content groups, then refine the Style · … groups.

It drops in with the default hero: a dark gradient, 80% of the window height, centered copy, a gold eyebrow, an Inter heading and two buttons.

Modes

• Single hero: one hero. The panel shows Content, Buttons, Form, Countdown and Background.
• Carousel (multiple slides): several heroes in a slider. The panel shows Carousel Slides and Carousel Settings. Each slide has its own background, colors, alignment, buttons, form and countdown.

The Style groups apply to both modes.

Backgrounds

• None: transparent; whatever sits behind the component shows through.
• Solid Color: any color at any opacity.
• Gradient: two colors and an angle in degrees.
• Image: your image with a focal position (center, top, bottom, left, right) and optional parallax. Turn off Show background image to remove the image and keep the overlay.
• Video: a looping, muted, autoplaying MP4 from a URL or an uploaded file, with a poster image for the first frame. Turn off Show poster to go without one.
• Overlay: a color wash or a gradient over the background so text stays readable. It shows for every background type except None.

Content

• Logo: optional, with a height and an optional link.
• Eyebrow: a short label above the heading with its own letter spacing and transform.
• Heading: with an H1, H2 or H3 tag so the page keeps a correct heading outline.
• Subheading: text with simple HTML: paragraphs, bold, italic, links and lists.
• Buttons: a primary and a secondary button, each with its own label and link. Links have Open in new tab and No follow switches. An empty label hides the button.

Forms

Hero Banner Pro shows a Framer form. Build a form in Framer (Insert › Forms), then drop it into Form components at the bottom of the content settings. Turn on Show Form in Form (or in a slide) and pick it with Form (slot #). You can connect up to ten forms and give each slide a different one.

Form Position puts the form below the copy or beside it as a card. Beside the copy, the card stacks under it at the tablet breakpoint. If you use an external form service, paste its https address in Form embed URL; it shows in a sandboxed frame when no Framer form is connected.

Form styles

• Card: background, border, border width, radius, padding, backdrop blur and max width.
• Text: form heading, label and input fonts with their colors.
• Inputs: background, border, focus color, radius and padding.
• Submit: background, text color and radius.
• Style the connected form: on by default. Turn it off to keep the label, input and button styling you gave the form in Framer; the card styles still apply.

Countdown

Counts down to a date and time in the visitor's own time zone and shows the Expired Message when the time has passed. Enter the target as YYYY-MM-DDTHH:MM:SS, for example 2026-12-31T23:59:59. Labels are editable for any language. Slides use their own target and the labels from the Countdown group.

Layout and height

• Section Height: 100vh, 80vh, 60vh, 40vh or Auto (fits the content).
• Full-Width Banner: place the component on a full-width stack with Width set to Fill for an edge-to-edge band. The switch keeps the corners square; turn it off to use Section Corner Radius.
• 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 content and form in the split layout.

Typography

The eyebrow, heading, subheading, buttons, form and countdown each have a font control (family, weight and size) and a color. Pick one typeface for everything or pair a display font with a body font. Heading Size — Mobile sets the smallest heading size; between phone and desktop the heading scales smoothly.

Buttons

Each button has a background, hover background, text color, hover text color, border color, border width, radius and padding. Pills, rounded, square and outline buttons all come from these values. Button Backdrop Blur adds a frosted look over images and video.

Animation

• Entrance Animation: none, fade up, fade in, slide from left, slide from right or scale in, with a stagger between elements.
• Animate Heading Letter-by-Letter: reveals the heading one letter at a time; words never break across lines.
• Background Parallax: image and video backgrounds drift as the visitor scrolls.
• Show Scroll-Down Indicator: an animated arrow that scrolls to the next section.
• Reduced motion: visitors who ask their system for reduced motion see everything at once, with no parallax and no carousel autoplay.

On the Framer canvas the component shows its finished state without motion. Preview or publish to see the animations.

Carousel

• Transition: slide or fade.
• Autoplay: moves to the next slide every Autoplay Speed milliseconds, pausing while the pointer is over the hero when Pause on Hover is on.
• Arrows and dots: arrows go to the previous and next slide and wrap around at both ends; dots jump to a slide.
• Swipe: on touch screens a horizontal swipe changes the slide.
• Pause button: while autoplay runs, a pause button sits at the bottom right. A visitor's pause holds until they press play. Keyboard focus inside the carousel also pauses it.
• Looping: after the last slide, autoplay and the next arrow go back to the first. The HubSpot module's Loop setting changed nothing, so the Framer component leaves it out.

Border, radius and shadow

Round the section, add a border with its own color and width, and pick a small, medium or large shadow with your own shadow color.

Responsive and accessible

• Fluid sizing: padding and type scale smoothly between phone and desktop with CSS clamp().
• Breakpoints: Tablet Breakpoint and Mobile Breakpoint follow the component's own width, so they also work in Framer's tablet and phone frames.
• Semantics: a real heading tag; the carousel is a labelled region whose slides read "1 of 3"; slides that are not shown are skipped by screen readers and the Tab key; dots mark the current slide.
• Keyboard: every link and button shows a two-tone focus ring (a ring in the element's color over a black or white edge) when reached with the keyboard, and none on a mouse click.
• Countdown: the ticking numbers are not read out every second; the expired message is announced once.

Settings reference

Every setting in the properties panel, in panel order, with its type and default.

FAQ and troubleshooting

The hero doesn't reach the edges of the page.

Set the component's Width to Fill and place it in a stack or page that is full width. Hero Banner Pro fills the layer it is in.

I don't see the animation on the canvas.

The canvas shows the finished state on purpose. Open Preview or the published site.

The form doesn't show.

Turn on Show Form, drop a Framer form into Form components, and check that Form (slot #) points at it. On the canvas an empty form says "Connect a Framer form in Form components."

The form looks different from how I designed it.

Style · Form Styles restyles the form's labels, inputs and submit button. Turn off Style the connected form to keep your own form design.

The countdown shows the expired message straight away.

The target date is in the past, or it is written in another format. Use YYYY-MM-DDTHH:MM:SS.

The video doesn't play on a phone.

Use an MP4 (H.264) file and add a Video Poster. Phones in low-power mode can block autoplay; the poster shows instead.

A link in the subheading lost its target or styling.

The subheading keeps simple HTML only: p, br, strong, b, em, i, u, s, a, span, ul, ol, li, code, small, sup and sub. Links keep href and title and open in the same tab.

Removing the background image brings the sample photo back.

An empty image control means "use the default". Turn off Show background image (or Show poster for video) to remove it.

Where is the Loop setting?

In the HubSpot module it changed nothing: the carousel always goes back to the first slide after the last. The Framer component leaves the setting out. The same goes for Validation Error Color, which only styled HubSpot form errors.

Can visitors stop the slideshow?

Yes. The pause button at the bottom right stops autoplay until they press play.

Can I put two heroes on one page?

Yes. Each instance has its own styles, carousel and countdown.

Known limits

• Form Styles reach plain labels, inputs, text areas, selects and submit buttons inside the connected form. A submit button built as a component variant keeps its own fill.
• An empty Background Image or Video Poster uses the sample image; use Show background image or Show poster to remove it.
• The carousel needs at least one slide; an empty slide list shows an empty band.
• Fluid text sizes follow the browser window, as on any web page, while the breakpoints follow the component's width.
• Autoplay, parallax and the countdown run in Preview and on the published site, not on the canvas.

Demo notes

• Top: a carousel at full height with a violet gradient, a photo, a video with a countdown, and a form slide. Bricolage Grotesque and Plus Jakarta Sans, pill buttons.
• Demo 2, brand announcement: light background, centered, a small logo and one black pill button. Space Grotesk.
• Demo 3, full-bleed mid-page: full-height photo with parallax, bottom right aligned, frosted outline button. Archivo.
• Demo 4, lead-gen split: light gray section, copy left, white form card right, black submit. Sora.
• Demo 5, launch event: full-bleed concert photo, condensed type, amber pill button and a countdown. Anton.
• Demo 6, brand statement: dark photo, left aligned, solid and outline buttons. Outfit.
• Demo 7, promo: sale banner over a retail photo, red accent, countdown and a frosted form card. Oswald.