Skip the navigation

Details

Details simplifies the display of non-interactive tags in your UI, allowing for flexible styling and presets.

  • Figma:Ready
  • Web:Ready
  • iOS:Ready
  • Package:Sportsbook

Usage

import { Details } from "@caesars-ui/core"

Details gives you a consistent way to display non-interactive text and graphic "tags" to support your UI. An example of a good use of a Detail is the live score / info section of a Market Template. None of these elements on their own are clickable or interactive, they serve as information only.

The list prop takes objects that conform to DetailType. These can also be referred to as "tags". Each tag can have text, a left icon, right icon, custom typography tokens, foreground and background colors giving you lots of flexibility to create intersting tags.

We've also compiled a list of presets, common tag looks and usages for example { type: 'live' } will give you a tag that has the live icon animating, and the words "Live" next to it.

Properties

* indicates required.

Accessibility

Principle

Status

Description

Percievable
Ready
The Date Details component has a clear visual display that distinguishes the day of the week and start time from other content on the page. It utilizes appropriate color contrast and font size to ensure readability for all users.
Operable
Ready
While the Date Details component may not have direct user interactivity, it is keyboard navigable, allowing users to access the information easily using keyboard navigation. It also provides focus indicators for keyboard users.
Understandable
Ready
The purpose of the Date Details component is clear through descriptive labels or headings. Users can easily understand the displayed day of the week and start time for the match.
Robust
Ready
The Date Details component is designed to be compatible with assistive technologies, ensuring that screen readers can access the information accurately. It functions consistently across various browsers and platforms.