Heading
Heading component is used to create various levels of typographic hierarchies.
Import#
import { Heading } from '@volue/wave-react';
Examples#
Basic#
Headings are intended to introduce sections of content. Use Heading to define a semantically relevant title to a component, content section or page.
Heading should represent semantic value and give content some structure. For general-purpose, body text, use Text component.
Custom semantics#
Heading component will render an h1 element by default.
Other heading level elements h1-h6 are available through use of the as property.
It is important to include a valid heading element to render a Heading component in order to maintain a coherent document outline. Follow semantic HTML guidelines when deciding which element to use and don't skip around in the hierarchy as this may misguide the user.
Note that the visual variant of a Heading can be controlled separately to which semantic element is used.
Heading levels#
By default, the semantic heading level matches the visual heading level.
Visual variants#
Headings are split based on appearance into different variants.
These variants provide specific styles to the font-size, font-weight, and line-height of the text to create hierarchy that allow users to easily scan content.
Variants allow Heading semantics to be different from the visuals.
To change the visual variant, use the variant property.
Responsive#
You can make the Heading appearance differ across screen sizes, as variant property is responsive. It accepts both a single variant or an object that maps variants to breakpoints defined in Wave.
Color#
Default text color for Heading is inherited from the parent. When needed, you can override with a different text color using color property.
Don't use accent colors or colors reserved for actions to make heading stand out more. Visual variants are sufficient to make it clear what is important.
Alignment#
Heading text can be aligned via the align prop.
Overflow strategy#
Use the overflowStrategy property to manage how Heading behaves with regard to overflow. For example, if you’re displaying user-generated content that may not fit within your layout, you can truncate text with the overflowStrategy set to truncate.
Tabular numbers#
Enable useTabularNumbers property to make numeric glyphs have uniform/tabular widths (rather than proportional).
This enables columns of numbers to line up properly, which makes scanning numerical data easier and less error-prone.
API Reference#
In addition to the props below, you can pass Box props to control the spacing.
Prop | Type | Default |
|---|---|---|
as | enum | h1 |
css | StitchesCss | No default value |
variant | enum | No default value |
color | ColorToken | No default value |
align | enum | No default value |
useTabularNumbers | boolean | No default value |
overflowStrategy | enum | No default value |