@paprika/heading

@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

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>;

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG