Heading
Usage
import { Heading } from "@caesars-ui/core";
Heading Sizes
| Size | Example |
|---|---|
| 2xl | Be a Caesar! |
| 2xl-bold | Be a Caesar! |
| xl | Be a Caesar! |
| xl-bold | Be a Caesar! |
| lg | Be a Caesar! |
| lg-bold | Be a Caesar! |
| md | Be a Caesar! |
| md-bold | Be a Caesar! |
| sm | Be a Caesar! |
| sm-bold | Be a Caesar! |
| xs | Be a Caesar! |
| xs-bold | Be a Caesar! |
The Heading component has a default setting of md. It also has a default setting for fg-default as the color. If you'd like to change the text color,
you can easily do so by providing a tailwind class in the color prop, such as tw-text-fg-inverse. Alternatively, you can also just set className like
any other React component and apply styles via your own classes. The default rendered HTML element is a p tag, be careful when rendering as other elements
where there might be element level styles applied to the text.
Properties
* indicates required.
Accessibility
Principle
Status
Description
Percievable
Ready
The Heading text component loads quickly and does not affect the overall performance of the website.
Operable
Ready
The Heading text component is easy to navigate and interacts well with other elements on the page. The text size, color, and style are easy to read and do not cause strain on the eyes.
Understandable
Ready
The Heading text component is clear, concise, and informative. It conveys the purpose of the page or section in a way that is easy for users to understand.
Robust
Ready
The Heading text component is consistent with other headings on the sportsbook, ensuring a consistent user experience.