Banner Duotone
A banner with duotone image effects
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.
This component can be refactored for general use.
Overview
The Banner Duotone component provides a visually striking banner with duotone image effects. It's designed to create engaging hero sections with optimal image loading and responsive behavior.
API Reference
BannerDuotone
The root container component with a green background and relative positioning.
BannerDuotone.BackgroundImage
Handles the background image with duotone effects and responsive sizing.
- mode:
'original' | 'duotone'- Controls whether to apply duotone effects
BannerDuotone.Content
Contains the main content with typography styling and optional footer.
- footer: Optional footer snippet for actions
Original Image Mode
Use mode="original" when you already have a duotone-processed image. This preserves the original image without applying additional effects.
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.
<BannerDuotone>
<BannerDuotone.BackgroundImage
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">
</BannerDuotone.BackgroundImage>
<BannerDuotone.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>
{#snippet footer()}
<Button pill variant="3" class="group/pointer">
Our Pipeline <Pointer class="text-white h-5 translate-y-0.5" />
</Button>
{/snippet}
</BannerDuotone.Content>
</BannerDuotone>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.
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.
<BannerDuotone>
<BannerDuotone.BackgroundImage
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">
</BannerDuotone.BackgroundImage>
<BannerDuotone.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>
{#snippet footer()}
<Button pill variant="3" class="group/pointer">
Our Pipeline <Pointer class="text-white h-5 translate-y-0.5" />
</Button>
{/snippet}
</BannerDuotone.Content>
</BannerDuotone>Image Credits
Use the credit snippet within the BackgroundImage component.
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.
<BannerDuotone>
<BannerDuotone.BackgroundImage
mode="duotone"
>
<img alt="Eye" draggable="false" loading="lazy" src="/images/Science-eye-blue-R-cropped.jpg">
<!-- <img alt="Researcher in Lab" draggable="false" loading="lazy" src="/images/banner-science-researcher-in-lab.jpg"> -->
{#snippet credit()}
© 2025 Jane Smith / Getty Images
{/snippet}
</BannerDuotone.BackgroundImage>
<BannerDuotone.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>
{#snippet footer()}
<Button pill variant="3" class="group/pointer">
Our Pipeline <Pointer class="text-white h-5 translate-y-0.5" />
</Button>
{/snippet}
</BannerDuotone.Content>
</BannerDuotone>