components

RichContent (beta) (code)

RichContent is a component that wraps around some HTML or other components and provides some default styling based on design system values.

Please use with care: The RichContent supports only a subset of the design system, use other components where possible instead!

BETA: The RichContent component is currently in an experimental phase. Feel free to try it out, but know that it's API might change.

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

Paragraph

Pariatur cillum quis sunt laboris culpa voluptate anim pariatur veniam occaecat irure veniam. Incididunt occaecat nostrud laboris tempor est consequat fugiat sit eu non anim aliqua 2.00. Nulla nisi voluptate exercitation sint small ex do magna veniam culpa occaecat incididunt. Ipsum excepteur sit eiusmod incididunt do aliquip Lorem adipisicing id esse aliquip sunt anim.

Pariatur cillum quis Hello, I'm a link sunt laboris culpa voluptate anim pariatur veniam occaecat irure veniam. Incididunt occaecat nostrud laboris tempor est consequat fugiat sit eu non anim aliqua 2.00. Nulla nisi voluptate exercitation sint small ex do magna veniam culpa occaecat incididunt. Ipsum excepteur sit eiusmod incididunt do aliquip Lorem adipisicing id esse aliquip sunt anim.

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

<RichContent>
  <h1>Heading1</h1>
  <h2>Heading2</h2>
  <h3>Heading3</h3>
  <h4>Heading4</h4>
  <h5>Heading5</h5>
  <h6>Heading6</h6>
  <p>Paragraph</p>
  <p>
    Pariatur cillum quis sunt laboris culpa voluptate anim pariatur veniam
    occaecat irure veniam. Incididunt occaecat nostrud laboris tempor est
    consequat fugiat sit eu non anim aliqua 2.00. Nulla nisi voluptate
    exercitation sint <small>small</small> ex do magna veniam culpa occaecat
    incididunt. Ipsum excepteur sit eiusmod incididunt do aliquip Lorem
    adipisicing id esse aliquip sunt anim.
  </p>
  <p>
    Pariatur cillum quis <a href="#">Hello, I'm a link</a> sunt laboris culpa
    voluptate anim pariatur veniam occaecat irure veniam. Incididunt occaecat
    nostrud laboris tempor est consequat fugiat sit eu non anim aliqua 2.00.
    Nulla nisi voluptate exercitation sint <small>small</small> ex do magna
    veniam culpa occaecat incididunt. Ipsum excepteur sit eiusmod incididunt do
    aliquip Lorem adipisicing id esse aliquip sunt anim.
  </p>
</RichContent>

<RichContent>
  <h1>Heading1</h1>
  <h2>Heading2</h2>
  <h3>Heading3</h3>
  <h4>Heading4</h4>
  <h5>Heading5</h5>
  <h6>Heading6</h6>
  <p>Paragraph</p>
  <p>
    Pariatur cillum quis sunt laboris culpa voluptate anim pariatur veniam
    occaecat irure veniam. Incididunt occaecat nostrud laboris tempor est
    consequat fugiat sit eu non anim aliqua 2.00. Nulla nisi voluptate
    exercitation sint <small>small</small> ex do magna veniam culpa occaecat
    incididunt. Ipsum excepteur sit eiusmod incididunt do aliquip Lorem
    adipisicing id esse aliquip sunt anim.
  </p>
  <p>
    Pariatur cillum quis <a href="#">Hello, I'm a link</a> sunt laboris culpa
    voluptate anim pariatur veniam occaecat irure veniam. Incididunt occaecat
    nostrud laboris tempor est consequat fugiat sit eu non anim aliqua 2.00.
    Nulla nisi voluptate exercitation sint <small>small</small> ex do magna
    veniam culpa occaecat incididunt. Ipsum excepteur sit eiusmod incididunt do
    aliquip Lorem adipisicing id esse aliquip sunt anim.
  </p>
</RichContent>

Props

Name	Type	Default	Required	Description
as	FunctionStringNodeObject	'div'	-	Render with a different HTML tag or a different custom component.
className	String	-	-	Extend classNames.
color	String	-	-	Changes the Paragraph's color, choose one of the tokens.
fontFamily	'inherit''primary''secondary''system'	'inherit'	-	FontFamily of font-system
style	{}	-	-	Extend style
textAlign	'inherit''left''right''center''justify'	-	-	textAlign css property.

System Props

color

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

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

fontWeight, fontStyle, textAlign, fontFamily, decoration, textTransform

float

display

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.