0.1.0-hack • Published 4 years ago

@paprika/hf-heading v0.1.0-hack

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

@paprika/heading

Description

Heading component provides different level of headings with various stylings such as divides, underline, light or hidden.

Installation

yarn add @paprika/heading

or with npm:

npm install @paprika/heading

Props

Heading

PropTyperequireddefaultDescription
a11yTextstringfalsenullOptional aria text if it should be more descriptive than what is rendered
childrennodetrue-Heading content is required
displayLevel 1, 2, 3, 4, 5, 6falsenullOptional display level(1-6) affects styles only
hasDividerboolfalsefalseHorizontal divider style
hasUnderlineboolfalsefalseUnderline style
isHiddenboolfalsefalseOptional, visually hide the header
isLightboolfalsefalseOptional, renders the children at a lighter font weight
isSemanticboolfalsetrueOptional, using to avoid styles override by global css.
level 1, 2, 3, 4, 5, 6true-Heading level(1-6) is required.

Usage

For a basic heading:

import Heading from "@paprika/heading";

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

Links