Heading
To display a styled heading element, use the Text.Heading component. By default it will render an H1 element. You can change this by passing a child of the desired heading level (tag).
import { Text, styled } from '@streamelements/frontend-ui';
<Text.Heading level="3">
H3 Heading
</Text.Heading>
Renders:
H3 Heading
Notice the level property. By default the Text.Heading component will render an h1 element, but with the level property you can assign a number that is from 2 through 6 to have it styled as h2...h6. To render a different tag name, provide asChild prop and a single-child with the desired tag or component.
<Text.Heading level="2" asChild>
<h4>h4 element styled as h2</h4>
</Text.Heading>
Renders
h4 element styled as h2
Props
Name | Type | Default value | Description |
asChild | boolean | – | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. |
level | 1 | 2 | 3 | 4 | 5 | 6 | 1 | The level and tag for the heading. Can be changed by passing asChild and providing a tag as `children`. |
weight | 'regular' | 'bold' | 'black' | 'regular' | Sets the font weight. |
Level
Tag
Weight
Weight
Weight