One Teva Design System

UI Elements

Hero Carousel

A Hero Carousel web component with animated orb background effects and slide-based content.

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 Carousel web component provides an engaging banner with animated orb background effects and slide-based content. It's designed to create dynamic hero sections with smooth transitions and responsive behavior using standard HTML elements.

API Reference

vision-teva-2025-hero-carousel

The root web component that manages the animated orb background, slide transitions, and timing controls.

  • autoplay: string - Enable automatic slide progression (use "true"/"false", default: not set)
  • autoplay-delay: number - Delay between slides in milliseconds (default: 5000)
  • slide-button-label: string - Aria label template for slide buttons (default: "Go to slide %")
  • prev-button-label: string - Aria label for previous button (default: "Previous slide")
  • next-button-label: string - Aria label for next button (default: "Next slide")
  • play-button-label: string - Aria label for play button (default: "Start autoplay")
  • pause-button-label: string - Aria label for pause button (default: "Pause autoplay")
  • slide-label: string - Aria label template for slides (default: "Slide % of $")
  • carousel-label: string - Aria label for carousel region (default: "Carousel")

vision-teva-2025-hero-carousel-slide

Individual slide content container with automatic content spacing, typography styling, and slide transition animations.

Typography

Some implementation questions remain unresolved. Will the title and body text be provided as separate fields, or combined in a single CMS rich text field?

Depending on this. Implementation could change.

Basic Usage

The Hero Carousel automatically cycles through slides with smooth transitions and animated orb effects in the background.

We are all in for better health

At Teva, we deliver quality medicines, discover life-changing treatments, and drive scientific innovation.

Learn More

Innovation at Every Step

From research to development, we're committed to advancing healthcare through cutting-edge science and technology.

Global Impact, Local Care

With a presence in over 60 countries, we bring accessible healthcare solutions to communities worldwide.

 
<vision-teva-2025-hero-carousel>
	<vision-teva-2025-hero-carousel-slide>
		<h1>We are all in for better health</h1>
		<p>
			At Teva, we deliver quality medicines, discover life-changing treatments, and drive scientific innovation.
		</p>
		<vision-button slot="footer" href="#learn-more" family="link" variant="3" collapse-inline="both" pointer>Learn More</vision-button>
	</vision-teva-2025-hero-carousel-slide>
	<vision-teva-2025-hero-carousel-slide>
		<h1>Innovation at Every Step</h1>
		<p>
			From research to development, we're committed to advancing healthcare through cutting-edge science and technology.
		</p>
	</vision-teva-2025-hero-carousel-slide>
	<vision-teva-2025-hero-carousel-slide>
		<h1>Global Impact, Local Care</h1>
		<p>
			With a presence in over 60 countries, we bring accessible healthcare solutions to communities worldwide.
		</p>
	</vision-teva-2025-hero-carousel-slide>
</vision-teva-2025-hero-carousel>

Multiple Content Types

Slides can contain various content types including multiple paragraphs, different heading structures, and call-to-action elements.

Comprehensive Healthcare Solutions

At Teva, we deliver quality medicines, discover life-changing treatments, and drive scientific innovation.

Our commitment extends beyond pharmaceuticals to include patient support programs and healthcare accessibility initiatives.

Research & Development Excellence

Our state-of-the-art research facilities span multiple continents, bringing together the world's brightest minds in pharmaceutical science.

From breakthrough therapies to biosimilar innovations, we're shaping the future of medicine through dedicated research and strategic partnerships.

Every day, our teams work tirelessly to translate scientific discoveries into meaningful treatments for patients worldwide.

Sustainable Healthcare Future

Environmental responsibility is at the core of our operations, ensuring that our pursuit of better health doesn't compromise the planet's wellbeing.

 
<vision-teva-2025-hero-carousel>
	<vision-teva-2025-hero-carousel-slide>
		<h1>Comprehensive Healthcare Solutions</h1>
		<p>
			At Teva, we deliver quality medicines, discover life-changing treatments, and drive scientific innovation.
		</p>
		<p>
			Our commitment extends beyond pharmaceuticals to include patient support programs and healthcare accessibility initiatives.
		</p>
	</vision-teva-2025-hero-carousel-slide>
	<vision-teva-2025-hero-carousel-slide>
		<h1>Research & Development Excellence</h1>
		<p>
			Our state-of-the-art research facilities span multiple continents, bringing together the world's brightest minds in pharmaceutical science.
		</p>
		<p>
			From breakthrough therapies to biosimilar innovations, we're shaping the future of medicine through dedicated research and strategic partnerships.
		</p>
		<p>
			Every day, our teams work tirelessly to translate scientific discoveries into meaningful treatments for patients worldwide.
		</p>
	</vision-teva-2025-hero-carousel-slide>
	<vision-teva-2025-hero-carousel-slide>
		<h1>Sustainable Healthcare Future</h1>
		<p>
			Environmental responsibility is at the core of our operations, ensuring that our pursuit of better health doesn't compromise the planet's wellbeing.
		</p>
	</vision-teva-2025-hero-carousel-slide>
</vision-teva-2025-hero-carousel>

Autoplay Mode

Enable automatic slide progression with customizable timing. The autoplay feature includes pause/play controls and automatically pauses on hover or focus for better accessibility.

Advancing Patient Care

Through innovative research and development, we're creating new pathways to better health outcomes for patients worldwide.

Global Healthcare Access

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

Sustainable Innovation

Developing breakthrough treatments while maintaining our commitment to environmental stewardship and social responsibility.

 
<vision-teva-2025-hero-carousel autoplay="true" autoplay-delay="3000">
	<vision-teva-2025-hero-carousel-slide>
		<h1>Advancing Patient Care</h1>
		<p>
			Through innovative research and development, we're creating new pathways to better health outcomes for patients worldwide.
		</p>
	</vision-teva-2025-hero-carousel-slide>
	<vision-teva-2025-hero-carousel-slide>
		<h1>Global Healthcare Access</h1>
		<p>
			Making quality medicines accessible and affordable across diverse communities and healthcare systems.
		</p>
	</vision-teva-2025-hero-carousel-slide>
	<vision-teva-2025-hero-carousel-slide>
		<h1>Sustainable Innovation</h1>
		<p>
			Developing breakthrough treatments while maintaining our commitment to environmental stewardship and social responsibility.
		</p>
	</vision-teva-2025-hero-carousel-slide>
</vision-teva-2025-hero-carousel>