Paragraph: React
Paragraph is meant for a distinct section of a piece of writing, usually dealing with a single theme
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 { Paragraph } from '@mediahuis/chameleon-react';
export default function Example() {
return <Paragraph>Example</Paragraph>;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
as | ElementType | 'p' | No | Allows rendering the component with a different HTML element. |
children | ReactNode | - | Yes | The content for the Paragraph component. |
className | String | - | No | Allows extending the class names of the Paragraph 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)') |
dropcap | Boolean | - | No | Adds a dropcap visual |
font | 'default' | 'alt' | 'default' | No | The font style of the Paragraph. |
size | 'sm' | 'lg' | 'sm' | No | The size of the Paragraph. |
weight | 'default' | 'strong' | 'default' | No | The font weight of the Paragraph. |
color
The color property alters the color of the Paragraph component. The values are color tokens such as color-primary-base. For more detailed information, refer to the Color section in the documentation.