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.

Overview

The Ticker Info component provides a structured way to display real-time data updates such as stock prices, financial metrics, or other time-sensitive information. It organizes data into logical groups with proper semantic markup and accessibility features.

API Reference

TickerInfo

The root container component that manages the layout and grouping of ticker information items.

TickerInfo.Group

Groups related ticker items together, providing logical organization and semantic structure.

TickerInfo.Item

Individual ticker data item

aria-label: string - Accessible label for the item value
id: string - Unique identifier for referencing by other elements
aria-describedby: string - References another element that describes this item

Basic Usage

The Ticker Info component displays data in organized groups, making it easy for users to scan and understand related information.

Accessibility Note: This example demonstrates several accessibility features:

aria-label attributes provide context for screen readers (e.g., "Change" for "-0.02")
id and aria-describedby create relationships between descriptive labels and values
Logical grouping helps users understand data relationships

-0.02

(-0.13%)

April 28, 2025

12:54 PM EDT

Delay

20 Minutes

<TickerInfo>
	<TickerInfo.Group>
		<TickerInfo.Item aria-label="Change">-0.02</TickerInfo.Item>
		<TickerInfo.Item aria-label="Change Percentage">(-0.13%)</TickerInfo.Item>
	</TickerInfo.Group>
	<TickerInfo.Group>
		<TickerInfo.Item aria-label="Date">April 28, 2025</TickerInfo.Item>
		<TickerInfo.Item aria-label="Time">12:54 PM EDT</TickerInfo.Item>
	</TickerInfo.Group>
	<TickerInfo.Group>
		<TickerInfo.Item id="delay-description">Delay</TickerInfo.Item>
		<TickerInfo.Item aria-describedby="delay-description">20 Minutes</TickerInfo.Item>
	</TickerInfo.Group>
</TickerInfo>