BrandedHeading: React
A branded heading gives brands deeper customisation possibilities.
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 { BrandedHeading } from '@mediahuis/chameleon-react';
export default function Example() {
return <BrandedHeading>Example</BrandedHeading>;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
actionLabel | String | - | No | The content of the label associated with the action element. This prop needs to be combined with the `actionUrl`. |
actionUrl | String | - | No | Adds a `href` attribute to the BrandedHeading. This prop needs to be combined with the `actionLabel`. Custom validation logic: If `actionUrl` is provided, `actionLabel` must also be a string. If `actionLabel` is provided, `actionUrl` must also be a string. |
as | ElementType | 'h2' | No | Allows changing the rendered HTML tag (e.g., span, p, h1). |
children | ReactNode | - | Yes | The content displayed within the component. This prop is required. |
size | 'sm' | 'lg' | 'lg' | No | Changes the visual size of the BrandedHeading.\ |