@paprika/heading

Heading

The <Heading> component provides six different levels of heading with various stylings such as divider, underline, light or hidden.

It is rendered as a <h> tag by default, but can also be rendered as a generic <div>. Set isSemantic to false if there are global CSS conflicts.

Installation

> npm install --save @paprika/heading or > yarn add @paprika/heading

Usage

For a basic heading

import Heading from "@paprika/heading";

<Heading level={1}>Heading One</Heading>;

Or a styling of headings with divider, hasUnderline, isLight, or isHidden

import Heading from "@paprika/heading";

<Heading level={1} hasDivider>
  Heading One With divider
</Heading>;

Props

• a11yText
• children
• displayLevel
• domRef
• hasDivider
• hasUnderline
• isHidden
• isLight
• isSemantic
• level

More detail about these props