One Teva Design System

UI Elements

Ticker Info Element

A web component for displaying real-time financial or data ticker information in organized groups

This element 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 element 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 as a native web component.

API Reference

vision-ticker-info

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

vision-ticker-info-group

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

vision-ticker-info-item

Individual ticker data item with support for accessibility attributes and semantic labeling.

  • 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 element 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 
<vision-ticker-info>
	<vision-ticker-info-group>
		<vision-ticker-info-item aria-label="Change">-0.02</vision-ticker-info-item>
		<vision-ticker-info-item aria-label="Change Percentage">(-0.13%)</vision-ticker-info-item>
	</vision-ticker-info-group>
	<vision-ticker-info-group>
		<vision-ticker-info-item aria-label="Date">April 28, 2025</vision-ticker-info-item>
		<vision-ticker-info-item aria-label="Time">12:54 PM EDT</vision-ticker-info-item>
	</vision-ticker-info-group>
	<vision-ticker-info-group>
		<vision-ticker-info-item id="delay-description">Delay</vision-ticker-info-item>
		<vision-ticker-info-item aria-describedby="delay-description">20 Minutes</vision-ticker-info-item>
	</vision-ticker-info-group>
</vision-ticker-info>