Hero Banner
A hero banner web component with flexible image positioning and optional eyebrow headings
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
vision-teva-2025-hero-banner
The root container that manages layout and spacing.
- reversed:
"true" | "false"— Reverses the image/content order (default: "false") - visual:
"small" | "large" | "moment"— Image sizing/placement style (default: "small")
vision-teva-2025-hero-banner-image
Houses the visual media. The visual attribute is controlled by the parent component.
vision-teva-2025-hero-banner-content
Content container with banner typography context. Supports a footer slot for buttons.
- slot="footer": Content for the footer area (typically buttons)
vision-teva-2025-hero-banner-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.
<vision-teva-2025-hero-banner visual="small">
<vision-teva-2025-hero-banner-image>
<img src="/images/237-800x800.jpg" alt="Sustainability initiatives" />
</vision-teva-2025-hero-banner-image>
<vision-teva-2025-hero-banner-content>
<h3>Sustainability at Teva</h3>
<p>At the forefront of Teva's innovative medicines pipeline is the development of therapeutic antibodies.</p>
<vision-button slot="footer" variant="3" pill="true">Read more</vision-button>
</vision-teva-2025-hero-banner-content>
</vision-teva-2025-hero-banner>
{#each Array.from({ length: count }) as item, index (index)}
<vision-teva-2025-hero-banner reversed={index % 2 === 0 ? "true" : "false"} visual={getVisualType(index)}>
<vision-teva-2025-hero-banner-image>
<img src="/images/237-800x800.jpg" alt="Sustainability initiatives" />
</vision-teva-2025-hero-banner-image>
<vision-teva-2025-hero-banner-content>
<h3>Sustainability at Teva</h3>
<p>At the forefront of Teva's innovative medicines pipeline is the development of therapeutic antibodies.</p>
<vision-button slot="footer" variant="3" pill="true">Read more</vision-button>
</vision-teva-2025-hero-banner-content>
</vision-teva-2025-hero-banner>
{/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.
<vision-teva-2025-hero-banner visual="large">
<vision-teva-2025-hero-banner-image>
<img src="/images/237-800x800.jpg" alt="Global healthcare access" />
</vision-teva-2025-hero-banner-image>
<vision-teva-2025-hero-banner-content>
<h3>Global Healthcare Access</h3>
<p>Making quality medicines accessible and affordable across diverse communities and systems worldwide.</p>
<vision-button slot="footer" variant="3" pill="true">Our Impact</vision-button>
</vision-teva-2025-hero-banner-content>
</vision-teva-2025-hero-banner>Patient‑Centered Care
Every decision is guided by our commitment to improving outcomes and quality of life.
<vision-teva-2025-hero-banner visual="moment">
<vision-teva-2025-hero-banner-image>
<img src="/images/237-800x800.jpg" alt="Patient care excellence" />
</vision-teva-2025-hero-banner-image>
<vision-teva-2025-hero-banner-content>
<h3>Patient‑Centered Care</h3>
<p>Every decision is guided by our commitment to improving outcomes and quality of life.</p>
<vision-button slot="footer" variant="3" pill="true">Patient Stories</vision-button>
</vision-teva-2025-hero-banner-content>
</vision-teva-2025-hero-banner>Reversed layout
Use reversed="true" to swap image and content positions.
Therapeutic Excellence
From rigorous research to clinical development, we turn discovery into care.
<vision-teva-2025-hero-banner reversed="true" visual="small">
<vision-teva-2025-hero-banner-image>
<img src="/images/237-800x800.jpg" alt="Therapeutic development" />
</vision-teva-2025-hero-banner-image>
<vision-teva-2025-hero-banner-content>
<h3>Therapeutic Excellence</h3>
<p>From rigorous research to clinical development, we turn discovery into care.</p>
<vision-button slot="footer" variant="3" pill="true">Our Pipeline</vision-button>
</vision-teva-2025-hero-banner-content>
</vision-teva-2025-hero-banner>With Eyebrow
Add an eyebrow heading for extra context above the content.
Innovation
Scientific Breakthroughs
Advancing medical science through research and strategic partnerships.
<vision-teva-2025-hero-banner visual="large">
<vision-teva-2025-hero-banner-eyebrow>
<h2>Innovation</h2>
</vision-teva-2025-hero-banner-eyebrow>
<vision-teva-2025-hero-banner-image>
<img src="/images/237-800x800.jpg" alt="Scientific innovation" />
</vision-teva-2025-hero-banner-image>
<vision-teva-2025-hero-banner-content>
<h3>Scientific Breakthroughs</h3>
<p>Advancing medical science through research and strategic partnerships.</p>
<vision-button slot="footer" variant="3" pill="true">Discover More</vision-button>
</vision-teva-2025-hero-banner-content>
</vision-teva-2025-hero-banner>Reversed with Eyebrow
Combine reversed layout with an eyebrow heading.
Global Impact
Worldwide Healthcare Solutions
Delivering accessible, high‑quality care across 60+ countries.
<vision-teva-2025-hero-banner reversed="true" visual="small">
<vision-teva-2025-hero-banner-eyebrow>
<h2>Global Impact</h2>
</vision-teva-2025-hero-banner-eyebrow>
<vision-teva-2025-hero-banner-image>
<img src="/images/237-800x800.jpg" alt="Global healthcare initiatives" />
</vision-teva-2025-hero-banner-image>
<vision-teva-2025-hero-banner-content>
<h3>Worldwide Healthcare Solutions</h3>
<p>Delivering accessible, high‑quality care across 60+ countries.</p>
<vision-button slot="footer" variant="3" pill="true">Global Presence</vision-button>
</vision-teva-2025-hero-banner-content>
</vision-teva-2025-hero-banner>