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
  • ariaLabel: Optional aria-label for the card link. Use this when the heading text alone is not descriptive enough, for example when multiple cards share similar headings
  • ctaLabel: Optional button label — when set, the card is no longer a link itself; instead a button is rendered below the text using the card's own href, target and rel
  • ctaAriaLabel: Optional aria-label for the CTA button rendered by ctaLabel — use this when the button text alone is not descriptive enough for screen readers
  • cta: Optional snippet for fully custom footer content — receives { href, target, rel } as arguments so you can reuse the card's link props without repeating them. When provided, the card arrow is removed and the card itself is no longer a link

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" ariaLabel="Spreading HOPE: How Teva is improving access to medicines across the globe">
		{#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>

Card with Button CTA

When a CTA is provided, the card behaviour changes entirely: the card is no longer a link itself, the arrow is removed, and the button becomes the only clickable element carrying the href.

Use the cta snippet for full control — the card passes its href, target and rel as snippet arguments so the button can use them without repetition:

Example

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

Read more
<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>
		{/snippet}
		{#snippet children()}
			<h4>Spreading <em>HOPE</em>: How Teva is improving access to medicines across the globe.</h4>
		{/snippet}
		{#snippet cta({ href, target, rel })}
			<Button {href} {target} {rel} variant="inversed">Read more</Button>
		{/snippet}
	</BentoBox.Card>
</BentoBox.Slide>

Or use ctaLabel — the card renders the button internally using its own href, no snippet needed. Add ctaAriaLabel when the button text alone is not descriptive enough for screen readers:

Example

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

Read more
<BentoBox.Slide>
	<BentoBox.Card href="#go-somewhere" target="_blank" rel="noreferrer" ctaLabel="Read more" ctaAriaLabel="Read more about Teva's access to medicines initiative">
		{#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>
		{/snippet}
		{#snippet children()}
			<h4>Spreading <em>HOPE</em>: How Teva is improving access to medicines across the globe.</h4>
		{/snippet}
	</BentoBox.Card>
</BentoBox.Slide>

Card with Custom Footer

Use the cta snippet to place any content in the card footer — a custom button, a link, or any other element. The card passes its own href, target and rel as snippet arguments so you can reuse them without repeating. The card arrow is removed and the card itself is no longer a link when this snippet is provided.

Example

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

Read more
<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>
		{/snippet}
		{#snippet children()}
			<h4>Spreading <em>HOPE</em>: How Teva is improving access to medicines across the globe.</h4>
		{/snippet}
		{#snippet cta({ href, target, rel })}
			<Button {href} {target} {rel} variant="inversed">Read more</Button>
		{/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>