The Heading component is used for displaying titles and section headings throughout your application. It provides consistent typography with various sizes, weights, and styles to establish visual hierarchy.

Heading components can be styled using the variant prop which combines font type, weight, and size.

You can override the default font-family that comes with the variant with the family prop.

You can override the default font-weight inside a variant with the weight prop.

Headings can be styled with different colors using the onBackground or onSolid props.

Control heading visibility with the opacity prop, accepting values from 0 to 100.

Control the text alignment of headings using the align prop.

Control how text wraps with the wrap prop. By default, the wrap prop is set to balance.

Headings support various spacing props for margin and padding.

Use the as prop to control the underlying HTML element while maintaining consistent styling.