One Teva Design System

UI Elements

BentoBox

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

The BentoBox component provides a responsive carousel container for organizing content cards in different layouts and sizes.

Overview

The BentoBox component is designed to create engaging, responsive layouts with cards of various sizes and configurations. It supports carousel functionality and multiple card types including standard, wide, stacked, and image-only layouts.

API Reference

BentoBox

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

BentoBox.Slide

Individual slide container within the carousel.

  • type: 'default' | 'image' | 'wide' - Controls the slide layout type

BentoBox.Card

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

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

BentoBox.CardStack

Container for stacking multiple cards vertically within a slide.

  • top: Snippet for the top card in the stack
  • bottom: Snippet for the bottom card in the stack

Basic Card

A standard card with image, taxonomy, and content. This is the default card type.

Example

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

<BentoBox.Slide>
	<BentoBox.Card href="#go-somewhere" target="_blank" rel="noreferrer">
		{#snippet image()}
			<img src="/images/726-320x190.jpg" alt="Example" />
		{/snippet}
		{#snippet taxonomy()}
			<Taxonomy aria-label="Categories" context="inversed">
				<Taxonomy.Item>
					<a href="#category-1">Category 1</a>
				</Taxonomy.Item>
				<Taxonomy.Item>
					<a href="#category-2">Category 2</a>
				</Taxonomy.Item>
				<Taxonomy.Item>
					<a href="#category-3">Category 3</a>
				</Taxonomy.Item>
			</Taxonomy>
		{/snippet}
		{#snippet children()}
			<h4>Spreading <em>HOPE</em>: How Teva is improving access to medicines across the globe.</h4>
		{/snippet}
	</BentoBox.Card>
</BentoBox.Slide>

Wide Card

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

Example

Coming home to Teva: rediscovering purpose and community.

<BentoBox.Slide type="wide">
	<BentoBox.Card type="wide" href="#go-somewhere" target="_blank" rel="noreferrer">
		{#snippet image()}
			<img src="/images/124-1000x620.jpg" alt="Example" />
		{/snippet}
		{#snippet taxonomy()}
			<Taxonomy aria-label="Categories" context="inversed">
				<Taxonomy.Item>
					<a href="#category-1">Category 1</a>
				</Taxonomy.Item>
				<Taxonomy.Item>
					<a href="#category-2">Category 2</a>
				</Taxonomy.Item>
			</Taxonomy>
		{/snippet}
		{#snippet children()}
			<h4>Coming home to Teva: <em>rediscovering purpose and community.</em></h4>
		{/snippet}
	</BentoBox.Card>
</BentoBox.Slide>

Image Card

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

Example

Breakthrough innovations in pharmaceutical research and development.

<BentoBox.Slide>
	<BentoBox.Card type="image" href="#go-somewhere" target="_blank" rel="noreferrer">
		{#snippet image()}
			<img src="/images/372-644x1120.jpg" alt="Example" />
		{/snippet}
		{#snippet taxonomy()}
			<Taxonomy aria-label="Categories" context="inversed">
				<Taxonomy.Item>
					<a href="#category-1">Category 1</a>
				</Taxonomy.Item>
				<Taxonomy.Item>
					<a href="#category-2">Category 2</a>
				</Taxonomy.Item>
			</Taxonomy>
		{/snippet}
		{#snippet children()}
			<h4>Breakthrough innovations in pharmaceutical research and development.</h4>
		{/snippet}
	</BentoBox.Card>
</BentoBox.Slide>

Stacked Card

A compact card designed for stacking, typically used within a BentoBox.CardStack.

Richard Daniell outlines key trends in global generics.

<BentoBox.Slide>
	<BentoBox.Card type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
		{#snippet taxonomy()}
			<Taxonomy aria-label="Categories" context="inversed">
				<Taxonomy.Item>
					<a href="#category-1">Category 1</a>
				</Taxonomy.Item>
				<Taxonomy.Item>
					<a href="#category-2">Category 2</a>
				</Taxonomy.Item>
			</Taxonomy>
		{/snippet}
		{#snippet children()}
			<h4>Richard Daniell <em>outlines key trends in global generics.</em></h4>
		{/snippet}
	</BentoBox.Card>
</BentoBox.Slide>

Card Stack

The BentoBox.CardStack allows you to stack multiple cards vertically within a single slide.

Richard Daniell outlines key trends in global generics.

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

<BentoBox.Slide>
	<BentoBox.CardStack>
		{#snippet top()}
			<BentoBox.Card type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
				{#snippet taxonomy()}
					<Taxonomy aria-label="Categories" context="inversed">
						<Taxonomy.Item>
							<a href="#category-1">Innovation</a>
						</Taxonomy.Item>
						<Taxonomy.Item>
							<a href="#category-2">Research</a>
						</Taxonomy.Item>
					</Taxonomy>
				{/snippet}
				{#snippet children()}
					<h4>Richard Daniell <em>outlines key trends in global generics.</em></h4>
				{/snippet}
			</BentoBox.Card>
		{/snippet}
		{#snippet bottom()}
			<BentoBox.Card type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
				{#snippet taxonomy()}
					<Taxonomy aria-label="Categories" context="inversed">
						<Taxonomy.Item>
							<a href="#category-1">Global Health</a>
						</Taxonomy.Item>
					</Taxonomy>
				{/snippet}
				{#snippet children()}
					<h4>Spreading <em>HOPE</em>: How Teva is improving access to medicines across the globe.</h4>
				{/snippet}
			</BentoBox.Card>
		{/snippet}
	</BentoBox.CardStack>
</BentoBox.Slide>

Complete Carousel Example

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

<BentoBox>
	<BentoBox.Slide>
		<BentoBox.Card href="#go-somewhere" target="_blank" rel="noreferrer">
			{#snippet image()}
				<img src="/images/726-320x190.jpg" alt="Example" />
			{/snippet}
			{#snippet taxonomy()}
				<Taxonomy aria-label="Categories" context="inversed">
					<Taxonomy.Item>
						<a href="#category-1">Innovation</a>
					</Taxonomy.Item>
					<Taxonomy.Item>
						<a href="#category-2">Science</a>
					</Taxonomy.Item>
				</Taxonomy>
			{/snippet}
			{#snippet children()}
				<h4>Spreading <em>HOPE</em>: How Teva is improving access to medicines across the globe.</h4>
			{/snippet}
		</BentoBox.Card>
	</BentoBox.Slide>

	<BentoBox.Slide type="wide">
		<BentoBox.Card type="wide" href="#go-somewhere" target="_blank" rel="noreferrer">
			{#snippet image()}
				<img src="/images/124-1000x620.jpg" alt="Example" />
			{/snippet}
			{#snippet taxonomy()}
				<Taxonomy aria-label="Categories" context="inversed">
					<Taxonomy.Item>
						<a href="#category-1">Leadership</a>
					</Taxonomy.Item>
					<Taxonomy.Item>
						<a href="#category-2">Community</a>
					</Taxonomy.Item>
				</Taxonomy>
			{/snippet}
			{#snippet children()}
				<h4>Coming home to Teva: <em>rediscovering purpose and community.</em></h4>
			{/snippet}
		</BentoBox.Card>
	</BentoBox.Slide>

	<BentoBox.Slide type="image">
		<BentoBox.Card type="image" href="#go-somewhere" target="_blank" rel="noreferrer">
			{#snippet image()}
				<img src="/images/372-644x1120.jpg" alt="Example" />
			{/snippet}
			{#snippet taxonomy()}
				<Taxonomy aria-label="Categories" context="inversed">
					<Taxonomy.Item>
						<a href="#category-1">Research</a>
					</Taxonomy.Item>
					<Taxonomy.Item>
						<a href="#category-2">Development</a>
					</Taxonomy.Item>
				</Taxonomy>
			{/snippet}
			{#snippet children()}
				<h4>Breakthrough innovations in pharmaceutical research and development.</h4>
			{/snippet}
		</BentoBox.Card>
	</BentoBox.Slide>

	<BentoBox.Slide>
		<BentoBox.CardStack>
			{#snippet top()}
				<BentoBox.Card type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
					{#snippet taxonomy()}
						<Taxonomy aria-label="Categories" context="inversed">
							<Taxonomy.Item>
								<a href="#category-1">Analysis</a>
							</Taxonomy.Item>
							<Taxonomy.Item>
								<a href="#category-2">Trends</a>
							</Taxonomy.Item>
						</Taxonomy>
					{/snippet}
					{#snippet children()}
						<h4>Richard Daniell <em>outlines key trends in global generics.</em></h4>
					{/snippet}
				</BentoBox.Card>
			{/snippet}
			{#snippet bottom()}
				<BentoBox.Card type="stacked" href="#go-somewhere" target="_blank" rel="noreferrer">
					{#snippet taxonomy()}
						<Taxonomy aria-label="Categories" context="inversed">
							<Taxonomy.Item>
								<a href="#category-1">Global Health</a>
							</Taxonomy.Item>
						</Taxonomy>
					{/snippet}
					{#snippet children()}
						<h4>Expanding access to essential medicines worldwide.</h4>
					{/snippet}
				</BentoBox.Card>
			{/snippet}
		</BentoBox.CardStack>
	</BentoBox.Slide>
</BentoBox>