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

Live Preview

Banner component

Summer Collection 2026

Discover the new season — up to 50% off on selected items.

Shop Now

Usage 

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"
  textAlignment="center"
  media={{ type: 'image', url: '/hero.jpg' }}
  mapLinks={[{ url: '/shop' }]}
/>
<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"
  textAlignment="center"
  media={{ type: 'image', url: '/hero.jpg' }}
  mapLinks={[{ url: '/shop' }]}
/>
<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"
  text-alignment="center"
></banner>

Props

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
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.