Chronos UI/ Banner
View Source
🖼 Component

Banner

Full-bleed hero banner with image or video background, title, subtitle, CTA button, and loading shimmer.

npm install @chronos-ui/core

Interactive Demo Playground

<chronos-banner> Playground
⚙️ Configure Properties
Main heading text.
Secondary text below the title.
Call to action button text. Omit to hide the button.
Alignment of text content: "left", "center", or "right".
❌ Invalid JSON Formatting
Background media object. { type: "image" | "video", url: string }
❌ Invalid JSON Formatting
Link for the CTA. { url: string }
Applies shimmer loading skeleton.
Alternative/direct text alignment configuration: "left", "center", or "right".
Alternative/direct background image or video source link.
Alternative/direct destination URL for the CTA button.
❌ Invalid JSON Formatting
Design and behavior settings. Supported keys: align, bgGradient, padding, autoplay, height, bgPosition.
❌ Invalid JSON Formatting
Clickable image-map regions overlaid on the media. Each: { id, altText, shape: 'rect'|'oval'|'polygon', coords: {x,y,width,height}, points?, action: {type,url,deeplink?}, showTooltip?, pulse? } (coords/points are % of the banner).
Defer mounting media/hotspots until scrolled near the viewport.

Usage Code Generator 

import Banner from '@chronos-ui/core/react/Banner';
import '@chronos-ui/core/theme.css';

<Banner
  title="Summer Collection 2026"
  subtitle="Discover the new season"
  ctaText="Shop Now"
  media={{ type: 'image', url: '/hero.jpg' }}
  hotspots={[
    { id: 'h1', altText: 'Jacket', shape: 'rect', coords: { x: 10, y: 20, width: 15, height: 25 }, action: { type: 'link', url: '/products/jacket' }, pulse: true, showTooltip: true, label: 'Jacket' }
  ]}
  ctaLink="/shop"
  lazyLoad
  config={{
    align: 'center',
    padding: 'lg',
    bgGradient: 'linear-gradient(to right, black, transparent)',
    height: 'auto',
    bgPosition: 'center'
  }}
/>
<script lang="ts">
  import Banner from '@chronos-ui/core/svelte/Banner.svelte';
  import '@chronos-ui/core/theme.css';
</script>

<Banner
  title="Summer Collection 2026"
  subtitle="Discover the new season"
  ctaText="Shop Now"
  media={{ type: 'image', url: '/hero.jpg' }}
  hotspots={[
    { id: 'h1', altText: 'Jacket', shape: 'rect', coords: { x: 10, y: 20, width: 15, height: 25 }, action: { type: 'link', url: '/products/jacket' }, pulse: true, showTooltip: true, label: 'Jacket' }
  ]}
  ctaLink="/shop"
  lazyLoad={true}
  config={{
    align: 'center',
    padding: 'lg',
    bgGradient: 'linear-gradient(to right, black, transparent)',
    height: 'auto',
    bgPosition: 'center'
  }}
/>
<link rel="stylesheet" href="node_modules/@chronos-ui/core/theme.css">
<script type="module"
  src="node_modules/@chronos-ui/core/webcomponents/Banner.js"></script>

<banner
  title="Summer Collection 2026"
  subtitle="Discover the new season"
  cta-text="Shop Now"
  media='{"type":"image","url":"/hero.jpg"}'
  hotspots='[{"id":"h1","altText":"Jacket","shape":"rect","coords":{"x":10,"y":20,"width":15,"height":25},"action":{"type":"link","url":"/products/jacket"},"pulse":true,"showTooltip":true,"label":"Jacket"}]'
  cta-link="/shop"
  lazy-load="true"
  config='{"align":"center","padding":"lg","height":"auto","bgPosition":"center"}'
></banner>

Props API Reference

PropTypeDefaultDescription
id string undefined Unique identifier passed to the root element
title string undefined Heading text rendered in the banner overlay
subtitle string undefined Sub-heading text displayed below the title
ctaText string undefined Call-to-action button label; renders an anchor when set
media BannerMedia undefined Background media: { type: 'image'|'video', url: string }
mapLinks MapLink[] undefined Link objects; first entry used as the CTA href
textAlignment 'left' | 'center' | 'right' undefined Text alignment for all banner content
className string undefined Additional CSS class names on the root element
isLoading boolean undefined Applies the chronos-image-shimmer skeleton animation
hotspots Hotspot[] undefined Clickable image-map regions (rect/oval/polygon) overlaid on the media, each linking to a URL or deeplink
lazyLoad boolean undefined Defer mounting media/hotspots until the banner scrolls near the viewport (default: true)
lazyThreshold number undefined IntersectionObserver threshold, 0-1 (default: 0.1)
lazyRootMargin string undefined IntersectionObserver rootMargin, e.g. preload distance (default: '200px')
Theming: Override --chronos-color-primary in your stylesheet to change the CTA button colour.
Video background: Set media.type = 'video' — the component renders a muted, autoplayed, looped <video> positioned absolutely behind the overlay.
Hotspots: Pass hotspots (rect/oval/polygon regions with coords as percentages) to overlay clickable image-map regions on the media, each linking to a URL or app deeplink. backgroundImageUrl remains supported as a legacy alternative to media.
Lazy loading: By default the banner defers mounting its media/hotspots until it scrolls near the viewport (shared IntersectionObserver per threshold across all widgets on the page). Pass lazyLoad={false} to disable, or tune lazyThreshold / lazyRootMargin.