@paprika/heading
v1.1.0
Published
Heading component provides different level of headings with various stylings such as divides, underline, light or hidden.
Readme
@paprika/heading
Description
Heading component provides different level of headings with various stylings such as divides, underline, light or hidden.
Installation
yarn add @paprika/headingor with npm:
npm install @paprika/headingProps
Heading
| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |a11yText|string|false|null| Optional aria text if it should be more descriptive than what is rendered| |children|node|true|-| Heading content is required| |displayLevel|[ 1, 2, 3, 4, 5, 6]|false|null| Optional display level(1-6) affects styles only| |hasDivider|bool|false|false| Horizontal divider style| |hasUnderline|bool|false|false| Underline style| |isHidden|bool|false|false| Optional, visually hide the header| |isLight|bool|false|false| Optional, renders the children at a lighter font weight| |isSemantic|bool|false|true| Optional, using to avoid styles override by global css.| |level|[ 1, 2, 3, 4, 5, 6]|true|-| Heading level(1-6) is required.|
Usage
For a basic heading:
import Heading from "@paprika/heading";
<Heading level={1}>Heading One</Heading>;