Docs / Hero Sections / Hero Slider

Hero Slider

A full-bleed rotating banner that cycles through one or more slides, each with its own background, badge, headline, body copy, and up to two calls to action. Reach for it on homepages, campaign rotations, and product-launch reveals where one hero needs to communicate several stories.

View live preview → Jump to settings ↓

→ Start Here

The controls editors reach for most: transition behavior, autoplay, navigation visibility, slide height, and content alignment. Lock these in first, then move on to the per-slide content.

Slide Transition

Select Default: Fade

Animation between slides. Fade cross-fades the backgrounds and content, Slide pushes horizontally, None swaps instantly. Pick None for the best Core Web Vitals score and the lowest CPU cost on low-end mobile.

  • slide Slide (horizontal push)
  • fade Fade (default)
  • none None (Instant)

Transition Speed (ms)

Number slider (100-3000, step 50) Default: 600ms Shown when: Slide Transition is Slide or Fade

How long the slide-to-slide animation takes. 300-500ms feels snappy, 600-900ms feels editorial, anything past 1200ms starts to feel sluggish on autoplay.

Autoplay

Toggle Default: On

When on, the slider advances on its own. Turn off if the hero is reference-style and you want visitors to drive the rotation themselves with the arrows or dots.

Autoplay Interval (ms)

Number slider (1500-30000, step 500) Default: 6000ms Shown when: Autoplay is on

Time each slide stays on screen before the next one advances. 5-7 seconds is the sweet spot for hero rotations - long enough to read the headline + subhead, short enough that visitors see slide 2 before they scroll away.

Pause on Hover

Toggle Default: On Shown when: Autoplay is on

Freezes the autoplay timer while the cursor is over the hero. Keep on so a visitor reading slide 2 doesn't get yanked to slide 3 mid-sentence.

Show Arrow Navigation

Toggle Default: On

Renders the left/right chevron buttons on either side of the slider. Hide them when dots alone are enough or when the hero sits inside a tight design where arrows would crowd the edge.

Show Dot Navigation

Toggle Default: On

Renders the row of dots below the slide content showing which slide is active. Hide for a cleaner full-bleed look when there are 2 or fewer slides.

Enable Touch Swipe

Toggle Default: On

Lets touch-screen visitors swipe left/right to change slides. Leave on for mobile-heavy audiences.

Disable Transitions (Performance)

Toggle Default: Off

Force-instant slide changes regardless of the Slide Transition setting. Use on pages where you need every CLS/INP point you can get - the hero will still rotate but without animation cost.

Slide Height (Desktop)

Number slider (200-1200px, step 10) Default: 800px

Fixed pixel height of each slide on desktop. 700-900px is typical for full-bleed marketing heroes; drop to 500-600px for a more utilitarian hero that lets content below the fold show.

Slide Height (Mobile)

Number slider (200-900px, step 10) Default: 540px

Fixed pixel height on mobile (below 992px). Tune so the headline + primary CTA sit comfortably above the fold of a typical phone viewport.

Content Alignment

Select Default: Center

Horizontal alignment of the slide content (badge, headline, body, buttons) within each slide. Applies to all slides.

  • left Left
  • center Center (default)
  • right Right

Vertical Alignment

Select Default: Middle

Where the slide content sits vertically inside the slide height. Drop to Bottom when you want the headline to sit just above a sticky CTA bar or scroll chevron.

  • flex-start Top
  • center Middle (default)
  • flex-end Bottom

/// Content

The slide-by-slide payload. One entrance animation applies to every slide; everything else is configured per slide inside the Slides repeater.

Entrance Animation

Select Default: None

How the slide content (badge, headline, body, buttons) animates in each time a slide becomes active. The slide background does not animate - only the foreground content.

  • none None (default)
  • up Fade Up
  • down Fade Down
  • left Fade from Left
  • right Fade from Right
  • fade Fade Only (no slide)

Reduced motion: The animation is skipped for visitors with prefers-reduced-motion: reduce.

Slides (repeater)

Repeater group (min 0, max 10) Default: 3 slides

The repeater that holds each slide. Add up to 10 slides; each one carries its own background, overlay, badge, content, two CTAs, and a scroll chevron. The sidebar label uses the per-slide Slide Label field if set, otherwise it falls back to generic numbering.

Per-slide fields are documented below.

Slide Label (internal)

Text Default: empty

Optional label shown in the editor sidebar for that slide. Helps editors find the right slide quickly when there are 4+ in the rotation. Not rendered on the page.

Slide Content

Rich text Default: H6 eyebrow + H1 headline + P subhead

The headline block for the slide. Use <h6> for the badge/eyebrow, <h1> for the headline, and <p> for the subheadline. The first hero on a page should be the only H1 on that page, so reach for H2 on every subsequent hero instance.

Badge Style

Select Default: Primary

The visual tier for the <h6> eyebrow inside the slide. Colors are configured in Theme Settings > Badge.

  • badge-primary Primary (default)
  • badge-secondary Secondary
  • badge-three Three
  • badge-four Four
  • badge-five Five
  • badge-six Six

Background Type

Select Default: Image

Drives which background sub-controls appear for this slide. Each slide can use a different background type within the same slider.

  • image Image (default) - reveals Background Image + Background Position
  • video Video - reveals Background Video URL + Video Poster Image
  • color Solid Color - reveals Background Color picker
  • gradient Gradient - reveals Start Color, End Color, and 6 direction options

Background Image

Image Default: blox geometric placeholder Shown when: Background Type is Image

The image used as the slide background. Renders with background-size: cover. Upload at least 1920x1080 so it stays crisp on desktop and downsizes cleanly on mobile.

Tip: Use a unique filename when replacing an existing slide image; HubSpot's CDN caches by URL and same-name overwrites can serve stale images for hours.

Background Position

Select Default: Center Shown when: Background Type is Image

The focal point for the background image when it gets cropped. Match the position to the part of the image you want preserved at all viewport widths.

  • center center Center (default)
  • center top Top
  • center bottom Bottom
  • left center Left
  • right center Right

Background Video URL

Text Default: empty Shown when: Background Type is Video

Direct URL to an .mp4 or .webm file. The video auto-plays muted with playsinline and loops. Keep files under 5MB; long or heavy videos hurt LCP on autoplay heroes.

Video Poster Image

Image Default: empty Shown when: Background Type is Video

Static image shown while the video loads or on devices that block autoplay. Should match the first frame of the video.

Background Color

Color Default: #1a1a2e Shown when: Background Type is Solid Color

Solid color used as the slide background. Pair with a strong overlay-off setup for typographic, image-free slides.

Gradient Start Color

Color Default: #3b1d6e Shown when: Background Type is Gradient

Origin color of the slide background gradient.

Gradient End Color

Color Default: #0e7490 Shown when: Background Type is Gradient

Destination color of the slide background gradient.

Gradient Direction

Select Default: Top-Left to Bottom-Right Shown when: Background Type is Gradient

Direction the gradient travels.

  • to bottom Top to Bottom
  • to top Bottom to Top
  • to right Left to Right
  • to left Right to Left
  • to bottom right Top-Left to Bottom-Right (default)
  • to bottom left Top-Right to Bottom-Left

Enable Overlay

Toggle Default: On

Adds a color or gradient overlay on top of the slide background so foreground text stays readable. Turn off when the slide background is already low-contrast enough for white type.

Overlay Type

Select Default: Solid Color Shown when: Enable Overlay is on

Whether the overlay is a flat color or a gradient. Gradient overlays are useful when the background image has detail you want preserved on one side and washed for legibility on the other.

  • solid Solid Color (default)
  • gradient Gradient

Overlay Color

Color Default: #0a0a23 @ 65% opacity Shown when: Overlay Type is Solid

Color + opacity of the solid overlay. 50-70% is the readable range for white text on a busy photo background.

Overlay Gradient Start Color

Color Default: #000000 @ 0% opacity Shown when: Overlay Type is Gradient

Origin color/opacity of the gradient overlay. Set opacity to 0 on one stop to fade from transparent to opaque.

Overlay Gradient End Color

Color Default: #000000 @ 100% opacity Shown when: Overlay Type is Gradient

Destination color/opacity of the gradient overlay.

Overlay Gradient Direction

Select Default: Top to Bottom Shown when: Overlay Type is Gradient

Direction the overlay gradient travels.

  • to bottom Top to Bottom (default)
  • to top Bottom to Top
  • to right Left to Right
  • to left Right to Left
  • 135deg Diagonal 135deg
  • 45deg Diagonal 45deg

Show Button 1

Toggle Default: On

Renders the primary CTA on this slide. Most slides should ship with at least one CTA so the hero earns its real estate.

Button 1 Label

Text Default: Get Started Shown when: Show Button 1 is on

The text shown on the primary button. Keep it 2-3 words and verb-first.

Button 1 Style

Select Default: Primary Shown when: Show Button 1 is on

Visual style applied to the primary button. All six tiers are configured in Theme Settings > Buttons.

  • cta-primary Primary (default)
  • cta-secondary Secondary
  • cta-tertiary Tertiary
  • cta-four Four (Outline)
  • cta-five Five (Indigo Gradient)
  • cta-six Six (Emerald Gradient)

Show Button 2

Toggle Default: On

Renders an optional secondary CTA next to the primary one. Use for a "Learn more" or "Watch demo" option that pairs with the primary action.

Button 2 Label

Text Default: Learn More Shown when: Show Button 2 is on

The text shown on the secondary button.

Button 2 Style

Select Default: Four (Outline) Shown when: Show Button 2 is on

Visual style for the secondary button. Outline (Four) is the default so it visually defers to the primary.

  • cta-primary Primary
  • cta-secondary Secondary
  • cta-tertiary Tertiary
  • cta-four Four (Outline) (default)
  • cta-five Five (Indigo Gradient)
  • cta-six Six (Emerald Gradient)

Show Scroll-Down Chevron

Toggle Default: On

Animated downward chevron under the buttons hinting that content continues below. Pair with full-bleed heroes (slide height 800+).

Chevron Color

Color Default: #ffffff Shown when: Show Scroll-Down Chevron is on

Color of the scroll-down chevron. Pick a color that contrasts with the slide's background + overlay.

Custom ID & Classes (code)

Developer hooks for custom CSS or JS targeting. Leave blank for most pages.

CSS ID

Text Default: empty

Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #hero) and JS targeting.

CSS Class

Text Default: empty

Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.

Style Settings

Visual tuning for the slide content max-width, the arrow + dot navigation styling, and the row's width + spacing.

/// Text Style

Content Max Width

Number slider (300-1400px, step 10) Default: 760px

Caps how wide the slide content (badge, headline, body, buttons) can grow inside each slide. 760px keeps headlines on 2 lines for typical hero copy; widen it for longer subheadlines.

Arrow Background

Color Default: #ffffff @ 90% opacity

Background color of the round arrow buttons. Drop opacity to 50% for a glassy effect over photo backgrounds.

Arrow Icon Color

Color Default: #1a1a1a

Color of the chevron icon inside each arrow button. Should contrast with Arrow Background.

Arrow Button Size

Number slider (32-80px, step 2) Default: 48px

Diameter of the round arrow buttons. 44px+ keeps them touch-target compliant.

Dot Color (Inactive)

Color Default: #ffffff @ 50% opacity

Color of dot indicators for non-active slides.

Dot Color (Active)

Color Default: #ffffff

Color of the dot indicator for the currently active slide. Should be clearly distinct from the inactive color.

/// Row Settings

The slider's wrapping row controls: container width and per-breakpoint padding. Hero Slider does not expose row background or section dividers - the slide background fills the whole hero.

Size (Content Width)

Group Default: Standard

How wide the slider container sits inside its row. Full Width is typical for hero placements; Standard or Slim if the hero is intentionally inset.

  • standard Standard (default; theme's standard container)
  • slim Slim (narrower; set in Theme Settings > Layout)
  • full Full Width
  • custom Custom - reveals a Custom Width number input (600-1920px, default 1200)

Spacing (Around Content)

Group (per breakpoint) Default: 0 on all sides for desktop, tablet, mobile

Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes top/bottom/left/right inputs. Hero Slider defaults to zero padding so the slider sits flush against neighboring sections.

/// Content

Everything visitors actually read or look at: the section heading, the rich-text column, the image, alignment + link options, and the scroll-in animation.

Section Heading

Rich text Default: blox Theme / Image & Text Module / one-line description Shown when: Show Section Heading is on

The badge + title + description block above the two-column layout. The default markup is <h6> (rendered as a pill badge if Badge Style is enabled), <h2> for the title, and <p> for the description. Keep the h6 short (2-4 words) so the badge pill stays compact.

Text Content

Rich text

The rich text body of the text column. Supports headings, paragraphs, bullet/numbered lists, links, and CTA buttons. Use the theme's CTA classes (cta-primary, cta-secondary, cta-tertiary, cta-four, cta-five, cta-six) on inline links to render them as styled buttons.

Text Alignment (Desktop)

Select Default: Left

Alignment for the text column on desktop. Independent from the heading alignment.

Text Alignment (Mobile)

Select Default: Center

Alignment for the text column on mobile. Defaults to center because centered short paragraphs read better in a single-column stack.

Image

Image Default: card-4.png placeholder

The image for the image column. Responsive sizing is on by default; the HubSpot file manager handles SRC + alt text. Upload a 1200×800 (or larger) image so the column has room to scale without softness.

Tip: Use a unique filename when you replace this image; HubSpot's CDN caches by URL, so overwriting a file with the same name can leave visitors seeing the stale image for hours.

Vertical Align Content to Center

Checkbox Default: On

Vertically centers both columns to each other. Turn off if you want the columns to top-align (useful when the text column is much taller than the image and you want the image to sit at the top).

Make Image Size Fluid

Checkbox Default: On

When on, the image stretches to 100% of its column width (height auto). Turn off if you want the image to render at its native size and align inside the column.

Show Text First on Mobile & Tablet

Checkbox Default: Off

Reverses the stack order on mobile/tablet so the text column appears above the image. Default stacking on small screens is image-first because images are usually the visual hook.

Fade-In Animation

Select Default: None

Triggers an IntersectionObserver-driven fade when the section scrolls into view. The fade adds a 30px slide from the chosen direction plus opacity.

  • none No animation (default)
  • bottom Fade Up (slides up from below)
  • top Fade Down (slides down from above)
  • left Fade from Left
  • right Fade from Right
  • fade Fade Only (no slide)

Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the section renders fully visible.

Custom ID & Classes (code)

Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.

CSS ID

Text Default: empty

Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #about) and JS targeting.

CSS Class

Text Default: empty

Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.

Style Settings

Everything visual: image styling, image scale + position, badge, section dividers, and the row's background/width/spacing.

/// Image Style

Border Radius

Slider (0-50px) Default: 12px

Rounded corners on the image. 12px matches the theme's default tile rounding; 0 for hard corners, 24+ for very soft, pill-like edges.

Image Shadow

Toggle Default: Off

Adds a soft drop shadow under the image. Render is box-shadow: 0 8px 30px shadow_color.

Shadow Color

Color Default: #000000 @ 5% opacity Shown when: Image Shadow is on

The color + opacity of the drop shadow. Stay under 15% opacity for tasteful shadow; above that the section starts to feel heavy.

/// Image Scale & Position

Optional transforms that scale and shift the image away from its grid cell. Useful for creating overlap or bleed effects.

Activate Scale & Position

Toggle Default: Off

Master switch for the scale + shift controls below. The desktop/tablet/mobile groups only render when this is on.

Desktop / Tablet / Mobile Settings

Group (per breakpoint) Shown when: Activate Scale & Position is on

Each breakpoint group exposes the same four controls so editors can fine-tune the transform per screen size:

  • scale Image Scale (0.5-5, default 1). Use sparingly - 0.1 increments are usually enough.
  • shift_left_right Horizontal shift in px (0-1000).
  • shift_left Checkbox to flip the horizontal shift direction (default shifts right).
  • shift_up_down Vertical shift in px (0-1000).
  • shift_up Checkbox to flip the vertical shift direction (default shifts down).

/// Badge Style

Show Badge Styling

Toggle Default: On

Styles the <h6> inside the section heading as a pill badge instead of a plain heading. The badge color/border are pulled from the chosen badge tier and the theme's badge settings.

Badge Style

Select Default: Four Shown when: Show Badge Styling is on

Picks the badge tier. Colors are configured in Theme Settings > Badge.

  • badge-primary White pill, dark text, light border
  • badge-secondary Transparent, black border, black text
  • badge-three Black fill, white text
  • badge-four Semi-transparent white with white border (works on dark hero)
  • badge-five Indigo-to-purple gradient, white text
  • badge-six Emerald-to-teal gradient, white text

/// Section Dividers

Decorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.

Top Divider / Bottom Divider

Select Default: None

Both top and bottom dividers share the same 9 shape options. The shape is rendered as an inline SVG matching the divider color you choose.

  • none No divider (default)
  • wave-1 Wave 1 (Gentle)
  • wave-2 Wave 2 (Sharp)
  • wave-3 Wave 3 (Multi)
  • wave-4 Wave 4 (Smooth)
  • wave-5 Wave 5 (Layered)
  • tilt Tilt (Angled)
  • curve Curve (Arc)
  • triangle Triangle

Each divider also exposes: Divider Color (set this to the background color of the adjacent section), Divider Height (20-200px, default 60), Angle Height (for the tilt divider only, 0-300px), Flip Divider (mirror horizontally), and for the bottom divider: Divider Under Content (puts the divider behind content so buttons stay clickable).

/// Row Settings

The section's wrapping row controls: background (color, gradient, image), content width, and per-breakpoint padding.

Background (Image, Video, Color, etc.)

Group Default: None

The Background Type dropdown drives which sub-controls appear:

  • none No background (default; section inherits the page bg)
  • color Solid Color — reveals Background Color picker
  • gradient Gradient — reveals Top Color, Bottom Color, and 8 direction options
  • image Image — reveals Background Image, Size (cover/contain/original), Position (9-point), Overlay toggle, Overlay Color, Blur toggle, Blur amount

Note: The "Background" group is labeled "Image, Video, Color, etc." in the editor but the current build does not include a video background option - the Background Type select only exposes none/color/gradient/image.

Size (Content Width)

Group Default: Standard
  • standard Standard (uses theme's standard container width, set in Theme Settings > Layout)
  • slim Slim (narrower variant, also set in Theme Settings)
  • custom Custom — reveals a Custom Width number input (600-1920px, default 1200)

Spacing (Around Content)

Group (per breakpoint)

Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:

  • desktop 100px top, 100px bottom, 0 left, 0 right
  • tablet 60px top, 60px bottom, 0 left, 0 right
  • mobile 40px top, 40px bottom, 15px left, 15px right