Hero Banner¶
Placeable in Canvas A full-bleed banner — image or video, one or many slides, with the content block anchored top, centre or bottom.
Loading…Props¶
| Prop | Required | Type | Description | Example |
|---|---|---|---|---|
layout |
Optional | enum | Simple is a compact banner, Full a full-height hero, Split puts content beside media. Defaults to simple. |
simple, full, split |
reverse |
Optional | boolean | Split layout only: show the media first. Defaults to false. |
false |
color_scheme |
Optional | enum | Match your slides so the arrows and dots stay visible. Defaults to dark. |
light, dark |
carousel_type |
Optional | enum | The slideshow style used when there's more than one slide. Site default follows the IXM Blocks setting. Defaults to default. |
default, bootstrap, swiper |
navigation |
Optional | boolean | Show previous and next arrows. Defaults to true. |
true |
pagination |
Optional | boolean | Show the slide dots. Defaults to true. |
true |
scrollbar |
Optional | boolean | Show a progress bar under the slides (Swiper style only). Defaults to false. |
false |
autoplay |
Optional | boolean | Move to the next slide on a timer, with a pause button (Swiper style only). Defaults to false. |
false |
autoplay_delay |
Optional | integer | How long each slide shows before the next one when slides play automatically. Defaults to 6. |
6 |
hero_id |
Optional | string | Optional. Leave empty unless you need to link to it. |
The banner's color_scheme only sets its carousel controls; each Hero Banner Slide's own color_scheme (see the Slide tab) colors that slide's text and background. They aren't linked: match them, or the arrows and dots can end up low-contrast against the slides.
Carousel type picks the slideshow library: Bootstrap or Swiper. Site default follows the setting at Configuration → Content → IXM Blocks (/admin/config/content/ixm-blocks), so one change switches every banner left on it. Choosing Bootstrap or Swiper here overrides that for a single banner, but its slides always follow the site setting, so leave banners on Site default unless you're sure the two match.
Slots¶
| Slot | Description |
|---|---|
slides |
The slides. See the Slide tab. |
A single-slide hero gets a smaller bottom padding at runtime
Multiple slides need extra space reserved for the carousel indicators/pagination dots; one slide doesn't, so it only keeps a small floor (--hero-content-pad-bottom-single) instead. hero-carousel-controller.js and hero-swiper.js swap .hero__banner's padding-bottom directly via inline style rather than toggling a specific utility class, so retheming that spacing (a different pb-* class, custom CSS, whatever) never silently breaks it.
Used inside the slides slot. Each slide is its own text block, plus an optional image or video background. Its props are grouped below by what they touch.
Content¶
| Prop | Required | Type | Description | Example |
|---|---|---|---|---|
eyebrow |
Optional | string | Small label shown above the title (e.g. 'Our Mission'). | Our Mission |
title |
Optional | string | The slide heading. | Welcome to Our Site |
body |
Optional | string | The slide text. | <p>Discover amazing content and features.</p> |
link_url |
Optional | string | Where the button links to. | /about |
link_text |
Optional | string | Link text | Learn More |
color_scheme |
Optional | enum | Keep Dark over images and video. Use Light only for a slide with no media. Defaults to dark. |
light, dark |
heading_level |
Optional | enum | Use h1 only when this slide title is the page's main heading. Defaults to h1. |
h1, h2, h3, h4, h5, h6 |
Layout¶
| Prop | Required | Type | Description | Example |
|---|---|---|---|---|
content_alignment |
Optional | enum | Where the text sits. Not used by the Split layout. Defaults to left. |
left, center, right |
content_valign |
Optional | enum | Show the text at the top, middle or bottom. Defaults to bottom. |
top, center, bottom |
Media¶
| Prop | Required | Type | Description | Example |
|---|---|---|---|---|
video |
Optional | object or string | Upload a video. Plays on tablets and larger screens. | |
video_url |
Optional | string | Used when no video is uploaded. | |
desktop_image |
Optional | object or string | Shown when there's no video. | |
mobile_image |
Optional | object or string | Replaces the video or image on phones. | |
show_audio_controls |
Optional | boolean | Video only. Turn off for a silent background video. Defaults to true. |
true |
desktop_image 16:9 · mobile_image 4:5 · video / video_url 16:9
Give autoplay video a pause control. → Full accessibility guidelines
Tokens used by this component
| Token | Default |
|---|---|
--hero-banner-breakout-correction |
(unset — 0px until a theme sets it) |
--hero-banner-cta-radius |
(unset — var(--theme-radius, 0) until a theme sets it) |
--hero-carousel-control-width |
15% |
--hero-content-pad-bottom |
(unset — clamp(1.5rem, 0.5rem + 2vw, 2.5rem) until a theme sets it) |
--hero-content-pad-bottom-single |
clamp(1rem, 0.5rem + 1vw, 1.5rem) |
--hero-controls-* |
(several — see full reference) |
--hero-eyebrow-color |
(unset — var(--bs-primary, #0a58ca) until a theme sets it) |
--hero-eyebrow-color-light |
(unset — #fff until a theme sets it) |
--hero-gradient-* |
(several — see full reference) |
--hero-indicator-hit-padding |
8px |
--hero-min-height-desktop |
600px |
--hero-min-height-mobile |
400px |
--hero-nav-* |
(several — see full reference) |
--hero-preloader-size |
60px |
--hero-split-* |
(several — see full reference) |
--hero-video-max-height |
56.25cqw |
--hero-video-max-width |
177.78cqh |
--swiper-pagination-* |
(several — see full reference) |
--swiper-theme-color |
var(--bs-light) |
→ Full token reference
→ Retheming walkthrough: Retheme a Hero Banner