Heading: React
Headings are meant to structurally denote important regions and provide a clear hierarchy in pages.
Installation
Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { Heading } from '@mediahuis/chameleon-react';
export default function Example() {
return <Heading>Example heading</Heading>;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
as | ElementType | - | No | Allows changing the rendered HTML tag (e.g., span, p, h1). |
children | ReactNode | - | Yes | The content for the Heading component. |
className | String | - | No | Allows extending the class names of the Heading component. |
color | ChameleonCssToken | - | No | Allows changing the color of the component through the use of a CSS Custom Property. (e.g. 'var(--color-primary-base)') |
level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | No | Changes the Heading's level. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'display' | 'xl' | No | Changes the Heading's visual size. |