One Teva Design System

UI Elements

Banner Duotone

A banner with duotone image effects

Overview

The <vision-banner-duotone> component provides a banner with duotone image effects. It's designed to create engaging hero sections with optimal image loading and responsive behavior.

API Reference

<vision-banner-duotone>

The root container web component with a green background and relative positioning.

  • No props - Acts as a container for child components

<vision-banner-duotone-background-image>

Handles the background image with duotone effects and responsive sizing.

  • mode: 'original' | 'duotone' - Controls whether to apply duotone effects (default: 'original')

<vision-banner-duotone-content>

Contains the main content with typography styling and optional footer slot.

  • No props - Content is provided via default slot
  • slot="footer": Use this slot attribute on child elements for footer content (buttons, links, etc.)

<vision-image-credit>

Displays image attribution text with proper positioning and styling.

  • No props - Content is provided via default slot
  • Usage: Should be used inside <vision-banner-duotone-background-image>

Footer Slot

The content component automatically detects elements with slot="footer" and positions them in the footer area. This is useful for call-to-action buttons or navigation links.

<vision-banner-duotone-content>
  <h2>Main Content</h2>
  <p>Description text</p>
  <button slot="footer">Primary Action</button>
  <a href="#" slot="footer">Secondary Action</a>
</vision-banner-duotone-content>

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.

Original Image Mode

Use mode="original" when you already have a duotone-processed image. This preserves the original image without applying additional effects.

Eye © 2025 Jane Smith / Getty Images

What’s Next in Science:
Step Up Innovation

At Teva, we are a different kind of biopharmaceutical company—one that innovates at every stage of drug development and delivery.

From in-house innovation to strategic partnerships, we are persistent in the creation of innovative medicines, generics and biologics to increasing the accessibility and affordability of existing medicines.

Our Pipeline 
<vision-banner-duotone>
	<vision-banner-duotone-background-image
		mode="original"
	>
		<!-- <img alt="Researcher in Lab" draggable="false" loading="lazy" src="/images/banner-science-researcher-in-lab.jpg"> -->
		<img alt="Eye" draggable="false" loading="lazy" src="/images/Science-eye-blue-R-cropped.jpg">
		<vision-image-credit>© 2025 Jane Smith / Getty Images</vision-image-credit>
	</vision-banner-duotone-background-image>
	<vision-banner-duotone-content>
		<!-- Typography coming from old library -->
		<h2>What’s Next in Science:<br /><strong>Step Up Innovation</strong></h2>

		<p>
			At Teva, we are a different kind of biopharmaceutical company—one that innovates at every
			stage of drug development and delivery.
		</p>

		<p>
			From in-house innovation to strategic partnerships, we are persistent in the creation of
			innovative medicines, generics and biologics to increasing the accessibility and
			affordability of existing medicines.
		</p>
		<vision-button slot="footer" variant="3" icon="false" pill="true" boxed="false">Our Pipeline</vision-button>
	</vision-banner-duotone-content>
</vision-banner-duotone>

Duotone Effect Mode

Use mode="duotone" when you have a regular image that needs duotone effects applied. The component will automatically apply grayscale filtering and color overlays to create the duotone effect using brand colors.

Eye

What’s Next in Science:
Step Up Innovation

At Teva, we are a different kind of biopharmaceutical company—one that innovates at every stage of drug development and delivery.

From in-house innovation to strategic partnerships, we are persistent in the creation of innovative medicines, generics and biologics to increasing the accessibility and affordability of existing medicines.

Our Pipeline 
<vision-banner-duotone>
	<vision-banner-duotone-background-image
		mode="duotone"
	>
		<!-- <img alt="Researcher in Lab" draggable="false" loading="lazy" src="/images/banner-science-researcher-in-lab.jpg"> -->
		<img alt="Eye" draggable="false" loading="lazy" src="/images/Science-eye-blue-R-cropped.jpg">
	</vision-banner-duotone-background-image>
	<vision-banner-duotone-content>
		<h2>What’s Next in Science:<br /><strong>Step Up Innovation</strong></h2>

		<p>
			At Teva, we are a different kind of biopharmaceutical company—one that innovates at every
			stage of drug development and delivery.
		</p>

		<p>
			From in-house innovation to strategic partnerships, we are persistent in the creation of
			innovative medicines, generics and biologics to increasing the accessibility and
			affordability of existing medicines.
		</p>
		<vision-button slot="footer" variant="3" pill>Our Pipeline</vision-button>
	</vision-banner-duotone-content>
</vision-banner-duotone>

Focal point

Should be more to the end of the image (depending reading direction).