This banner was developed exclusively for the TEVA rebrand initiative.

It is not intended for general use in other projects.
Please do not use this component outside of the TEVA context.

Overview

The Hero Banner provides an image-and-content hero section with responsive layout, optional reversed ordering, and an optional eyebrow heading for additional context.

API Reference

HeroBanner

The root container that manages layout and spacing.

reversed: boolean — Reverses the image/content order (default: false)

HeroBanner.Image

Houses the visual media and supports sizing variants.

visual: 'small' | 'large' | 'moment' — Image sizing/placement style (default: 'moment')

HeroBanner.Content

Content container with banner typography context.

HeroBanner.Eyebrow

Optional eyebrow heading displayed above the content.

Basic Usage

A standard hero with image and text content.

Sustainability at Teva

At the forefront of Teva's innovative medicines pipeline is the development of therapeutic antibodies.

<HeroBanner>
	<HeroBanner.Image visual="small">
		<img src="/images/237-800x800.jpg" alt="Sustainability initiatives" />
	</HeroBanner.Image>
	<HeroBanner.Content>
		<h3>Sustainability at Teva</h3>
		<p>At the forefront of Teva's innovative medicines pipeline is the development of therapeutic antibodies.</p>
		<Button pill variant="3" class="group/pointer">
			Read more <Pointer class="text-white h-5 translate-y-0.5" />
		</Button>
	</HeroBanner.Content>
</HeroBanner>
{#each Array.from({ length: count }) as item, index (index)}
	<HeroBanner reversed={index % 2 === 0}>
		<HeroBanner.Image visual={getVisualType(index)}>
			<img src="/images/237-800x800.jpg" alt="Sustainability initiatives" />
		</HeroBanner.Image>
		<HeroBanner.Content>
			<h3>Sustainability at Teva</h3>
			<p>At the forefront of Teva's innovative medicines pipeline is the development of therapeutic antibodies.</p>
			<Button pill variant="3" class="group/pointer">
				Read more <Pointer class="text-white h-5 translate-y-0.5" />
			</Button>
		</HeroBanner.Content>
	</HeroBanner>
{/each}
<Container size="main" class="my-4">
	<Button onclick={() => count++}>Add Hero Banner</Button>
</Container>

Visual variants

Choose the image visual that best fits the composition: small, large or moment.

Global Healthcare Access

Making quality medicines accessible and affordable across diverse communities and systems worldwide.

<HeroBanner>
	<HeroBanner.Image visual="large">
		<img src="/images/237-800x800.jpg" alt="Global healthcare access" />
	</HeroBanner.Image>
	<HeroBanner.Content>
		<h3>Global Healthcare Access</h3>
		<p>Making quality medicines accessible and affordable across diverse communities and systems worldwide.</p>
		<Button pill variant="3" class="group/pointer">
			Our Impact <Pointer class="text-white h-5 translate-y-0.5" />
		</Button>
	</HeroBanner.Content>
</HeroBanner>

Patient‑Centered Care

Every decision is guided by our commitment to improving outcomes and quality of life.

<HeroBanner>
	<HeroBanner.Image visual="moment">
		<img src="/images/237-800x800.jpg" alt="Patient care excellence" />
	</HeroBanner.Image>
	<HeroBanner.Content>
		<h3>Patient‑Centered Care</h3>
		<p>Every decision is guided by our commitment to improving outcomes and quality of life.</p>
		<Button pill variant="3" class="group/pointer">
			Patient Stories <Pointer class="text-white h-5 translate-y-0.5" />
		</Button>
	</HeroBanner.Content>
</HeroBanner>

Reversed layout

Use reversed to swap image and content positions.

Therapeutic Excellence

From rigorous research to clinical development, we turn discovery into care.

<HeroBanner reversed>
	<HeroBanner.Image visual="small">
		<img src="/images/237-800x800.jpg" alt="Therapeutic development" />
	</HeroBanner.Image>
	<HeroBanner.Content>
		<h3>Therapeutic Excellence</h3>
		<p>From rigorous research to clinical development, we turn discovery into care.</p>
		<Button pill variant="3" class="group/pointer">
			Our Pipeline <Pointer class="text-white h-5 translate-y-0.5" />
		</Button>
	</HeroBanner.Content>
</HeroBanner>

With Eyebrow

Add an eyebrow heading for extra context above the content.

Scientific Breakthroughs

Advancing medical science through research and strategic partnerships.

<HeroBanner>
	<HeroBanner.Eyebrow>
		<h2>Innovation</h2>
	</HeroBanner.Eyebrow>
	<HeroBanner.Image visual="large">
		<img src="/images/237-800x800.jpg" alt="Scientific innovation" />
	</HeroBanner.Image>
	<HeroBanner.Content>
		<h3>Scientific Breakthroughs</h3>
		<p>Advancing medical science through research and strategic partnerships.</p>
		<Button pill variant="3" class="group/pointer">
			Discover More <Pointer class="text-white h-5 translate-y-0.5" />
		</Button>
	</HeroBanner.Content>
</HeroBanner>

Reversed with Eyebrow

Combine reversed layout with an eyebrow heading.

Worldwide Healthcare Solutions

Delivering accessible, high‑quality care across 60+ countries.

<HeroBanner reversed>
	<HeroBanner.Eyebrow>
		<h2>Global Impact</h2>
	</HeroBanner.Eyebrow>
	<HeroBanner.Image visual="small">
		<img src="/images/237-800x800.jpg" alt="Global healthcare initiatives" />
	</HeroBanner.Image>
	<HeroBanner.Content>
		<h3>Worldwide Healthcare Solutions</h3>
		<p>Delivering accessible, high‑quality care across 60+ countries.</p>
		<Button pill variant="3" class="group/pointer">
			Global Presence <Pointer class="text-white h-5 translate-y-0.5" />
		</Button>
	</HeroBanner.Content>
</HeroBanner>