components

BrandedHeading (code)

A branded heading gives brands deeper customisation possibilities to brands.

A header that contains built-in branding

import { BrandedHeading } from '@mediahuis/chameleon-react'

<BrandedHeading>A header that contains built-in branding</BrandedHeading>

<BrandedHeading>A header that contains built-in branding</BrandedHeading>

Props

Name	Type	Default	Required	Description
appearance	'primary''secondary'	'primary'	-	Controls the BrandedHeading’s visual style.
as	String	'h1'	-	Change the rendered HTML tag e.g. span, p, h1.
children	Node	-	true	Content displayed within the component.
size	'small''large'	'large'	-	Changes the BrandedHeading’s visual size.

System Props

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

m, mb, ml, mr, mt, mx, my

float

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

Action

default: undefined

Link to a different page, or trigger states via action. You can render any element you like here.

Hello world

<BrandedHeading action={<Button onClick={() => alert('Hello world')} appearance="plain" size="small">Action</Button>}>Hello world</BrandedHeading>

<BrandedHeading action={<Button onClick={() => alert('Hello world')} appearance="plain" size="small">Action</Button>}>Hello world</BrandedHeading>

Appearance

default: primary

There are 2 possible appearances a BrandedHeading can have. Secondary is in most cases used on dark backgrounds.

Primary

Secondary

<Box py={8} px={4}>
  <BrandedHeading appearance="primary">Primary</BrandedHeading>
</Box>
<Box py={8} px={4} bgColor="grey90">
  <BrandedHeading appearance="secondary">Secondary</BrandedHeading>
</Box>

<Box py={8} px={4}>
  <BrandedHeading appearance="primary">Primary</BrandedHeading>
</Box>
<Box py={8} px={4} bgColor="grey90">
  <BrandedHeading appearance="secondary">Secondary</BrandedHeading>
</Box>

As

default: h1

Render the component with a different HTML element to make sure it's semantically correct.

H1

H2

H3

<BrandedHeading as="h1">H1</BrandedHeading>
<BrandedHeading as="h2">H2</BrandedHeading>
<BrandedHeading as="h3">H3</BrandedHeading>

<BrandedHeading as="h1">H1</BrandedHeading>
<BrandedHeading as="h2">H2</BrandedHeading>
<BrandedHeading as="h3">H3</BrandedHeading>

Size

default: large

Each size can be used in it's own context.

Default large

Large

Small

<BrandedHeading>Default large</BrandedHeading>
<BrandedHeading size="large">Large</BrandedHeading>
<BrandedHeading size="small">Small</BrandedHeading>

<BrandedHeading>Default large</BrandedHeading>
<BrandedHeading size="large">Large</BrandedHeading>
<BrandedHeading size="small">Small</BrandedHeading>

BrandedHeading (code)

A header that contains built-in branding

Props

System Props

System Props

Action

Hello worldAction

Appearance

Primary

Secondary

As

H1

H2

H3

Size

Default large

Large

Small

Hello world