Hero Promo Overlay Controls

ProNew

Use this when a homepage hero rotates promotions with calls to action: a looping hero with buttons on every slide and the Pause, dots and progress laid over the picture, holding while focus is on a button.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

interval6000

Guide and examples

When to use it

Use it for a campaign or product hero with two to four slides, each with one clear action, where the controls should not take space under the picture.

Do not use it as the only way to reach important actions: a rotating hero hides the other slides. Keep the main navigation elsewhere.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`slides`	`HeroSlide[]`	`-`	Each has an id, heading, text, cta label, href and a background style.
`label`	`string`	`-`	Accessible name of the carousel.
`interval`	`number`	`6000`	Time on each slide in ms.

Accessibility

A Pause / Start button is always present, and rotation holds while focus is inside, so a keyboard user can reach the call to action without the slide moving away.
The live region is off while rotating and polite when stopped.
Overlaid controls sit on a dark scrim so they keep contrast over any picture; the text is white on a dark gradient.
With prefers-reduced-motion it starts paused.
Keyboard: Tab: Pause, then the slide's button, previous, next
Keyboard: Left / Right: previous or next slide

Testing

The pattern ships with a Testing Library test (hero-promo-overlay-controls.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.