@paprika/heading
v1.0.18
Published
Heading component provides different level of headings with various stylings such as divides, underline, light or hidden.
Downloads
18,359
Keywords
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>;