Heading Primitive

A primitive to give semantic meaning to preceding content.

This component is for Code only.

Maturity

FYQ2 target

Beta

Repository

Open link

Storybook

Open link

Overview

The Heading Primitive is the underlying scaffolding for the Heading component. It lacks any defined style as it is intended to have style added and gives all abilities you’d expect from the text.

In most cases, Heading should fulfill the need to set a visual hierarchy for sections. But if there is a need for a localized version, Heading Primitive is a great base to work from. Try to use Heading whenever possible. If, for some reason it doesn’t fit your needs, let us know #design-system.

Related content

Components vs. Primitives

Encapsulate the expected functional component UX without styles.

Properties

Name	Values	Default
align Set the horizontal text alignment, based on text-align. Works with dir to correctly set the directionality.	end, start, center, justify	–
color Set the text color with any valid CSS color	string	–
dir Indicates the directionality of the element's text, based on dir	auto, ltr, rtl	–
hidden Whether an element is completely hidden on the page	boolean	–
id The id of the element	string	–
inline Render text inline instead of as a block	boolean	–
level The semantic level of the heading.	1, 2, 3, 4, 5, 6	2
size The font size	string	–
transform Case transformations of text, based on text-transform	uppercase, lowercase, capitalize	–
truncate Truncate the text based on it’s width	boolean	–
whiteSpace Set how the white space inside the text is handled, based on white-space	pre, normal, nowrap, pre-wrap, break-spaces, pre-line	normal

How to use

Because Heading is built with HeadingPrimitive, it has all the features and functionality with the added ability to be styled.


                                                        
                                                        
                                                            const NewHeading = styled(HeadingPrimitive)`
                                                          font-size: 100px;
                                                          color: blue;
                                                        `;
                                                        
                                                        <NewHeading level={1}>My New Heading</NewHeading>