Hero

Setup

To set up, here is the code

import {startup, Hero} from 'js/mediaviewer.js';
startup(); //Loads up the library

/**
 * Responsive hero banner with alignment, button/link tabs and theming via CSS variables.
 *
 * @constructor
 * @param {string|HTMLElement} container - Hero block element or CSS selector.
 * @param {{ eyebrow?: string, title?: string, subtitle?: string, description?: string, src?: string, alt?: string, tabs?: Array<{ title?: string, label?: string, href?: string, url?: string, target?: '_self'|'_blank'|'_parent'|'_top', rel?: string, variant?: 'primary'|'ghost' }>, align?: 'left'|'center'|'right', tabsPlacement?: 'top'|'bottom', tabsVariant?: 'buttons'|'links' }} [config] - Content and behavior options for the banner, including call‑to‑action buttons/links (in `tabs`).
 * @param {{ 'bg'?: string, 'color'?: string, 'height'?: string, 'max-w'?: string|number, 'padding-y'?: string, 'padding-x'?: string, 'title-size'?: string, 'subtitle-size'?: string, 'eyebrow-size'?: string, 'scrim-from'?: string, 'scrim-to'?: string, 'btn-font-family'?: string, 'btn-font-size'?: string|number, 'btn-active-bg'?: string, 'btn-active-color'?: string, 'btn-active-border'?: string, 'btn-bg'?: string, 'btn-color'?: string, 'btn-border'?: string, 'btn-hover-bg'?: string, 'btn-hover-color'?: string, 'btn-hover-border'?: string, 'fade-duration'?: string, 'font-family'?: string, 'bg-hover'?: string, 'color-hover'?: string }} [styles] - Visual tokens mapped to hero CSS variables (e.g., `--hero-banner-height`).
 * @example
 * new Hero('#hero', { title:'Welcome', subtitle:'Build fast.', tabsVariant:'buttons', tabs:[{ title:'Docs', url:'#docs' }] }, { 'max-w': 1200 });
 */
new Hero('.demo', {
// configurations
},
{
// CSS Before and After variables
});

Configurations

Label	Type	Values	Default	Description	Required
eyebrow	string	any	''	Sets text in the eyebrow part	✖️
title	string	any	''	Sets the title in the banner	✔️
subtitle	string	any	''	Sets the subtitle in the banner	✖️
description	string	any	''	Sets the description in the banner	✖️
background	string	any	''	Sets the background in the banner	✖️
alt	string	any	''	Sets the alternative to background of the banner	✖️
tabs	object[]	{url: string, target: string, rel: string, label: string, variant: 'ghost'|'primary'}	[]	Sets a bunch of tabs on your banner	✔️
align	string	left, right, center	left	Sets the alignment of the content in the banner	✖️
tabsPlacement	string	bottom, top	bottom	Sets the position of the tabs in the banner	✖️
tabsVariant	string	buttons, links	buttons	Sets the variant of the tabs	✖️

Styles

Variable	Name	Values	Default	Description
--hero-banner-bg	bg	color	linear-gradient(180deg, var(--hero-scrim-from), var(--hero-scrim-to))	Sets the banner background
--hero-banner-color	color	color	#3a3a3a	Banner color
--hero-banner-height	height	size	56vh	Banner height
--hero-banner-max-w	max-w	size	1200px	Max width of the banner
--hero-banner-padding-y	padding-y	size	clamp(24px, 6vw, 80px)	Padding y of the banner
--hero-banner-padding-x	padding-x	size	clamp(16px, 4vw, 48px)	Padding x of the banner
--hero-banner-title-size	title-size	size	clamp(28px, 4.8vw, 56px)	Title size
--hero-banner-subtitle-size	subtitle-size	size	clamp(16px, 2vw, 22px)	Subtitle size
--hero-banner-eyebrow-size	eyebrow-size	size	clamp(12px, 1.4vw, 13px)	eyebrow size
--hero-banner-font-family	font-family	family	var(--family-proportional-serif)	Font family style
--hero-banner-bg-hover	bg-hover	color	#e0e1dd	Background hover
--hero-banner-color-hover	color-hover	color	#0d1b2a	Color hover

HTML

To operate in HTML, use the following code

<!--Replace ... with any of the valid configurations-->
<section
    id="..."
    media-hero
    data-align="..."
    data-tabs-placement="..."
    data-tabs-variant="..."
    data-styles="..."
    background="..."
    style="...">

    <span>...</span>
    <h1>...</h1>
    <p>...</p>

    <!-- Tabs / Actions (data-variant: primary | ghost) -->
    <div class="actions">
      <a ...>...</a>
    </div>
  </section>
<script src="autoloader.js" type="module"></script>