One Teva Design System

UI Elements

BentoBox

A flexible carousel-based layout system for displaying content cards in various configurations

Overview

The <vision-bentobox> web component provides a responsive carousel container for organizing content cards in different layouts and sizes. It supports carousel functionality and multiple card types including standard, wide, stacked, and image-only layouts.

API Reference

<vision-bentobox>

The root carousel container web component that manages slide navigation and layout.

  • No props - Acts as a container for card components
  • slot="footer": Use this slot attribute on child elements for footer content (buttons, navigation, etc.)

<vision-bentobox-card>

Individual card web component with support for images, taxonomy, and content.

  • type: 'normal' | 'wide' | 'stacked' | 'image' - Controls card layout and styling (default: 'normal')
  • context: 'default' | 'inversed' | 'life-effects' - Controls visual context and theming (default: 'default')
  • href: Optional link URL
  • target: Link target attribute
  • rel: Link relationship attribute

<vision-bentobox-card-image>

Container for card images with responsive sizing and aspect ratio handling.

  • No props - Content is provided via default slot
  • Usage: Should contain an <img> element

<vision-bentobox-card-content>

Container for card text content with typography styling.

  • No props - Content is provided via default slot
  • Usage: Typically contains headings and paragraphs

<vision-bentobox-card-stack>

Container for stacking multiple cards vertically within the carousel.

  • No props - Contains multiple <vision-bentobox-card> elements
  • Usage: Cards inside should use type="stacked"

<vision-taxonomy>

Displays categorization tags for cards.

  • slot="taxonomy": Use this slot attribute when placing inside cards
  • context: 'default' | 'inversed' - Controls visual theming

Basic Card

A standard card with image, taxonomy, and content. This is the default card type using type="normal".

Example Innovation Science

Spreading HOPE: How Teva is improving access to medicines across the globe.

 
<vision-bentobox-card type="normal" href="#go-somewhere" target="_blank" rel="noreferrer">
	<vision-bentobox-card-image>
		<img src="/images/726-640x380.jpg" alt="Example" />
	</vision-bentobox-card-image>
	<vision-taxonomy slot="taxonomy" context="inversed">
		<vision-taxonomy-item>
			<a href="#innovation">Innovation</a>
		</vision-taxonomy-item>
		<vision-taxonomy-item>
			<a href="#science">Science</a>
		</vision-taxonomy-item>
	</vision-taxonomy>
	<vision-bentobox-card-content>
		<h4>Spreading <em>HOPE</em>: How Teva is improving access to medicines across the globe.</h4>
	</vision-bentobox-card-content>
</vision-bentobox-card>

Wide Card

A wider card variant that takes up more horizontal space, ideal for featured content.

Example Leadership Community

Coming home to Teva: rediscovering purpose and community.

 
<vision-bentobox-card type="wide" href="#go-somewhere" target="_blank" rel="noreferrer">
	<vision-bentobox-card-image>
		<img src="/images/124-1000x620.jpg" alt="Example" />
	</vision-bentobox-card-image>
	<vision-taxonomy slot="taxonomy" context="inversed">
		<vision-taxonomy-item>
			<a href="#leadership">Leadership</a>
		</vision-taxonomy-item>
		<vision-taxonomy-item>
			<a href="#community">Community</a>
		</vision-taxonomy-item>
	</vision-taxonomy>
	<vision-bentobox-card-content>
		<h4>Coming home to Teva: <em>rediscovering purpose and community.</em></h4>
	</vision-bentobox-card-content>
</vision-bentobox-card>

Image Card

An image-focused card where the image takes up the full card space with overlaid content.

Example Research Development

Breakthrough innovations in pharmaceutical research and development.

 
<vision-bentobox-card type="image" href="#go-somewhere" target="_blank" rel="noreferrer">
	<vision-bentobox-card-image>
		<img src="/images/372-644x1120.jpg" alt="Example" />
	</vision-bentobox-card-image>
	<vision-taxonomy slot="taxonomy" context="inversed">
		<vision-taxonomy-item>
			<a href="#research">Research</a>
		</vision-taxonomy-item>
		<vision-taxonomy-item>
			<a href="#development">Development</a>
		</vision-taxonomy-item>
	</vision-taxonomy>
	<vision-bentobox-card-content>
		<h4>Breakthrough innovations in pharmaceutical research and development.</h4>
	</vision-bentobox-card-content>
</vision-bentobox-card>

Stacked Card

A compact card designed for stacking, typically used within a <vision-bentobox-card-stack>.

Analysis Trends

Richard Daniell outlines key trends in global generics.

 
<vision-bentobox-card type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
	<vision-taxonomy slot="taxonomy" context="inversed">
		<vision-taxonomy-item>
			<a href="#analysis">Analysis</a>
		</vision-taxonomy-item>
		<vision-taxonomy-item>
			<a href="#trends">Trends</a>
		</vision-taxonomy-item>
	</vision-taxonomy>
	<vision-bentobox-card-content>
		<h4>Richard Daniell <em>outlines key trends in global generics.</em></h4>
	</vision-bentobox-card-content>
</vision-bentobox-card>

Card Stack

The <vision-bentobox-card-stack> allows you to stack multiple cards vertically within the carousel.

Analysis Trends

Richard Daniell outlines key trends in global generics.

 Global Health

Expanding access to essential medicines worldwide.

 
<vision-bentobox-card-stack>
	<vision-bentobox-card type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-taxonomy slot="taxonomy" context="inversed">
			<vision-taxonomy-item>
				<a href="#analysis">Analysis</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#trends">Trends</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Richard Daniell <em>outlines key trends in global generics.</em></h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>
	<vision-bentobox-card type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-taxonomy slot="taxonomy" context="inversed">
			<vision-taxonomy-item>
				<a href="#global-health">Global Health</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Expanding access to essential medicines worldwide.</h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>
</vision-bentobox-card-stack>

Context Variations

Cards support different visual contexts. The context="inversed" provides a dark background with light text, while context="life-effects" adds special visual treatments.

Example Innovation Research

Inversed context card with dark background styling.

 
<vision-bentobox-card type="wide" context="inversed" href="#go-somewhere" target="_blank" rel="noreferrer">
	<vision-bentobox-card-image>
		<img src="/images/124-1000x620.jpg" alt="Example" />
	</vision-bentobox-card-image>
	<vision-taxonomy slot="taxonomy" context="default">
		<vision-taxonomy-item>
			<a href="#innovation">Innovation</a>
		</vision-taxonomy-item>
		<vision-taxonomy-item>
			<a href="#research">Research</a>
		</vision-taxonomy-item>
	</vision-taxonomy>
	<vision-bentobox-card-content>
		<h4>Inversed context card with <em>dark background styling.</em></h4>
	</vision-bentobox-card-content>
</vision-bentobox-card>

Footer Slot

The carousel container automatically detects elements with slot="footer" and positions them in the footer area. This is useful for navigation controls or additional actions.

<vision-bentobox>
  <!-- cards here -->
  <vision-button slot="footer">View All Articles</vision-button>
</vision-bentobox>

Complete Carousel Example

A full BentoBox carousel with multiple cards containing different types and layouts.

Example Innovation Science

Spreading HOPE: How Teva is improving access to medicines across the globe.

 Example Research Development

Breakthrough innovations in pharmaceutical research and development.

 Example Leadership Community

Coming home to Teva: rediscovering purpose and community.

 Example Sustainability Environment

Building a sustainable future through responsible manufacturing practices.

 Analysis Trends

Richard Daniell outlines key trends in global generics.

 Global Health

Expanding access to essential medicines worldwide.

 Example Therapy Treatment

Advancing patient care through innovative therapeutic solutions.

 Example Partnerships Collaboration

Strengthening healthcare systems through strategic partnerships.

 Example Future Vision

Shaping the future of healthcare through bold innovation and unwavering commitment.

 Quality Safety

Maintaining the highest standards in pharmaceutical quality and safety.

 Patients

Putting patients first in everything we do.

 View All Articles 
<vision-bentobox>
	<!-- Card 1: normal -->
	<vision-bentobox-card type="normal" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-bentobox-card-image>
			<img src="/images/726-640x380.jpg" alt="Example" />
		</vision-bentobox-card-image>
		<vision-taxonomy slot="taxonomy" context="inversed">
			<vision-taxonomy-item>
				<a href="#innovation">Innovation</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#science">Science</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Spreading <em>HOPE</em>: How Teva is improving access to medicines across the globe.</h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>

	<!-- Card 2: image -->
	<vision-bentobox-card type="image" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-bentobox-card-image>
			<img src="/images/372-644x1120.jpg" alt="Example" />
		</vision-bentobox-card-image>
		<vision-taxonomy slot="taxonomy" context="inversed">
			<vision-taxonomy-item>
				<a href="#research">Research</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#development">Development</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Breakthrough innovations in pharmaceutical research and development.</h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>

	<!-- Card 3: wide + inversed -->
	<vision-bentobox-card type="wide" context="inversed" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-bentobox-card-image>
			<img src="/images/124-1000x620.jpg" alt="Example" />
		</vision-bentobox-card-image>
		<vision-taxonomy slot="taxonomy" context="default">
			<vision-taxonomy-item>
				<a href="#leadership">Leadership</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#community">Community</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Coming home to Teva: <em>rediscovering purpose and community.</em></h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>

	<!-- Card 4: normal -->
	<vision-bentobox-card type="normal" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-bentobox-card-image>
			<img src="/images/726-640x380.jpg" alt="Example" />
		</vision-bentobox-card-image>
		<vision-taxonomy slot="taxonomy" context="inversed">
			<vision-taxonomy-item>
				<a href="#sustainability">Sustainability</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#environment">Environment</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Building a sustainable future through <em>responsible manufacturing practices.</em></h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>

	<!-- Card 5: stacked (2 cards) -->
	<vision-bentobox-card-stack>
		<vision-bentobox-card type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
			<vision-taxonomy slot="taxonomy" context="inversed">
				<vision-taxonomy-item>
					<a href="#analysis">Analysis</a>
				</vision-taxonomy-item>
				<vision-taxonomy-item>
					<a href="#trends">Trends</a>
				</vision-taxonomy-item>
			</vision-taxonomy>
			<vision-bentobox-card-content>
				<h4>Richard Daniell <em>outlines key trends in global generics.</em></h4>
			</vision-bentobox-card-content>
		</vision-bentobox-card>
		<vision-bentobox-card type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
			<vision-taxonomy slot="taxonomy" context="inversed">
				<vision-taxonomy-item>
					<a href="#global-health">Global Health</a>
				</vision-taxonomy-item>
			</vision-taxonomy>
			<vision-bentobox-card-content>
				<h4>Expanding access to essential medicines worldwide.</h4>
			</vision-bentobox-card-content>
		</vision-bentobox-card>
	</vision-bentobox-card-stack>

	<!-- Card 6: image -->
	<vision-bentobox-card type="image" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-bentobox-card-image>
			<img src="/images/372-644x1120.jpg" alt="Example" />
		</vision-bentobox-card-image>
		<vision-taxonomy slot="taxonomy" context="inversed">
			<vision-taxonomy-item>
				<a href="#therapy">Therapy</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#treatment">Treatment</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Advancing patient care through <em>innovative therapeutic solutions.</em></h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>

	<!-- Card 7: normal -->
	<vision-bentobox-card type="normal" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-bentobox-card-image>
			<img src="/images/726-640x380.jpg" alt="Example" />
		</vision-bentobox-card-image>
		<vision-taxonomy slot="taxonomy" context="inversed">
			<vision-taxonomy-item>
				<a href="#partnerships">Partnerships</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#collaboration">Collaboration</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Strengthening healthcare systems through <em>strategic partnerships.</em></h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>

	<!-- Card 8: wide -->
	<vision-bentobox-card type="wide" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-bentobox-card-image>
			<img src="/images/124-1000x620.jpg" alt="Example" />
		</vision-bentobox-card-image>
		<vision-taxonomy slot="taxonomy" context="inversed">
			<vision-taxonomy-item>
				<a href="#future">Future</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#vision">Vision</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Shaping the future of healthcare through <em>bold innovation and unwavering commitment.</em></h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>

	<!-- Card 9: stacked (2 cards) -->
	<vision-bentobox-card-stack>
		<vision-bentobox-card type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
			<vision-taxonomy slot="taxonomy" context="inversed">
				<vision-taxonomy-item>
					<a href="#quality">Quality</a>
				</vision-taxonomy-item>
				<vision-taxonomy-item>
					<a href="#safety">Safety</a>
				</vision-taxonomy-item>
			</vision-taxonomy>
			<vision-bentobox-card-content>
				<h4>Maintaining the highest standards in <em>pharmaceutical quality and safety.</em></h4>
			</vision-bentobox-card-content>
		</vision-bentobox-card>
		<vision-bentobox-card type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
			<vision-taxonomy slot="taxonomy" context="inversed">
				<vision-taxonomy-item>
					<a href="#patients">Patients</a>
				</vision-taxonomy-item>
			</vision-taxonomy>
			<vision-bentobox-card-content>
				<h4>Putting patients first in <em>everything we do.</em></h4>
			</vision-bentobox-card-content>
		</vision-bentobox-card>
	</vision-bentobox-card-stack>

	<vision-button slot="footer" variant="4" underline>View All Articles</vision-button>
</vision-bentobox>

Alternative Carousel Layout

A second BentoBox carousel arrangement showcasing different content organization and card flow patterns.

Example Discovery Pipeline

Exploring new frontiers in drug discovery and development.

 Example Manufacturing Precision

Precision manufacturing for life-changing medications.

 Example Access Affordability

Making essential medicines accessible and affordable worldwide.

 Biosimilars Specialty

Leading the way in biosimilar and specialty medicines.

 CNS

Advancing treatments for central nervous system disorders.

 Example Digital Technology

Embracing digital transformation in pharmaceutical innovation.

 Example Workforce Diversity

Building a diverse and inclusive global workforce.

 Example Regulatory Compliance

Maintaining excellence in regulatory compliance and quality assurance.

 Respiratory Devices

Innovating in respiratory care and delivery devices.

 Oncology

Advancing cancer treatment through targeted therapies.

 Explore Our Science 
<vision-bentobox>
	<!-- Card 1: normal -->
	<vision-bentobox-card context="life-effects" type="normal" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-bentobox-card-image>
			<img src="/images/726-640x380.jpg" alt="Example" />
		</vision-bentobox-card-image>
		<vision-taxonomy slot="taxonomy" context="default">
			<vision-taxonomy-item>
				<a href="#discovery">Discovery</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#pipeline">Pipeline</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Exploring new frontiers in <em>drug discovery and development.</em></h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>

	<!-- Card 2: image -->
	<vision-bentobox-card type="image" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-bentobox-card-image>
			<img src="/images/372-644x1120.jpg" alt="Example" />
		</vision-bentobox-card-image>
		<vision-taxonomy slot="taxonomy" context="inversed">
			<vision-taxonomy-item>
				<a href="#manufacturing">Manufacturing</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#precision">Precision</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Precision manufacturing for <em>life-changing medications.</em></h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>

	<!-- Card 3: wide -->
	<vision-bentobox-card context="life-effects" type="wide" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-bentobox-card-image>
			<img src="/images/124-1000x620.jpg" alt="Example" />
		</vision-bentobox-card-image>
		<vision-taxonomy slot="taxonomy" context="default">
			<vision-taxonomy-item>
				<a href="#access">Access</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#affordability">Affordability</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Making essential medicines <em>accessible and affordable worldwide.</em></h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>

	<!-- Card 4: stacked (2 cards) -->
	<vision-bentobox-card-stack>
		<vision-bentobox-card context="life-effects" type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
			<vision-taxonomy slot="taxonomy" context="default">
				<vision-taxonomy-item>
					<a href="#biosimilars">Biosimilars</a>
				</vision-taxonomy-item>
				<vision-taxonomy-item>
					<a href="#specialty">Specialty</a>
				</vision-taxonomy-item>
			</vision-taxonomy>
			<vision-bentobox-card-content>
				<h4>Leading the way in <em>biosimilar and specialty medicines.</em></h4>
			</vision-bentobox-card-content>
		</vision-bentobox-card>
		<vision-bentobox-card context="life-effects" type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
			<vision-taxonomy slot="taxonomy" context="default">
				<vision-taxonomy-item>
					<a href="#cns">CNS</a>
				</vision-taxonomy-item>
			</vision-taxonomy>
			<vision-bentobox-card-content>
				<h4>Advancing treatments for <em>central nervous system disorders.</em></h4>
			</vision-bentobox-card-content>
		</vision-bentobox-card>
	</vision-bentobox-card-stack>

	<!-- Card 5: image -->
	<vision-bentobox-card type="image" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-bentobox-card-image>
			<img src="/images/372-644x1120.jpg" alt="Example" />
		</vision-bentobox-card-image>
		<vision-taxonomy slot="taxonomy" context="inversed">
			<vision-taxonomy-item>
				<a href="#digital">Digital</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#technology">Technology</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Embracing digital transformation in <em>pharmaceutical innovation.</em></h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>

	<!-- Card 6: normal -->
	<vision-bentobox-card context="life-effects" type="normal" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-bentobox-card-image>
			<img src="/images/726-640x380.jpg" alt="Example" />
		</vision-bentobox-card-image>
		<vision-taxonomy slot="taxonomy" context="default">
			<vision-taxonomy-item>
				<a href="#workforce">Workforce</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#diversity">Diversity</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Building a diverse and <em>inclusive global workforce.</em></h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>

	<!-- Card 7: wide + inversed!!! -->
	<vision-bentobox-card context="life-effects" type="wide" href="#go-somewhere" target="_blank" rel="noreferrer">
		<vision-bentobox-card-image>
			<img src="/images/124-1000x620.jpg" alt="Example" />
		</vision-bentobox-card-image>
		<vision-taxonomy slot="taxonomy" context="default">
			<vision-taxonomy-item>
				<a href="#regulatory">Regulatory</a>
			</vision-taxonomy-item>
			<vision-taxonomy-item>
				<a href="#compliance">Compliance</a>
			</vision-taxonomy-item>
		</vision-taxonomy>
		<vision-bentobox-card-content>
			<h4>Maintaining excellence in <em>regulatory compliance and quality assurance.</em></h4>
		</vision-bentobox-card-content>
	</vision-bentobox-card>

	<!-- Card 8: stacked (2 cards) -->
	<vision-bentobox-card-stack>
		<vision-bentobox-card context="life-effects" type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
			<vision-taxonomy slot="taxonomy" context="default">
				<vision-taxonomy-item>
					<a href="#respiratory">Respiratory</a>
				</vision-taxonomy-item>
				<vision-taxonomy-item>
					<a href="#devices">Devices</a>
				</vision-taxonomy-item>
			</vision-taxonomy>
			<vision-bentobox-card-content>
				<h4>Innovating in <em>respiratory care and delivery devices.</em></h4>
			</vision-bentobox-card-content>
		</vision-bentobox-card>
		<vision-bentobox-card context="life-effects" type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
			<vision-taxonomy slot="taxonomy" context="default">
				<vision-taxonomy-item>
					<a href="#oncology">Oncology</a>
				</vision-taxonomy-item>
			</vision-taxonomy>
			<vision-bentobox-card-content>
				<h4>Advancing cancer treatment through <em>targeted therapies.</em></h4>
			</vision-bentobox-card-content>
		</vision-bentobox-card>
	</vision-bentobox-card-stack>

	<vision-button slot="footer" variant="4" underline>Explore Our Science</vision-button>
</vision-bentobox>