Heading Beta Heading creates a title or subject of an article or another piece of written work.
install yarn add @clayui/core version use import {Heading } from '@clayui/core' ;
Introduction
Heading is a component that creates a title or a subject of an article or a pice of work. This a proposal created using the h1 tag which you can modify the weight and the level of the component.
Level
By default, the semantic of the heading level is level 1 in which the component will render as an h1 element. However, if you need to change the semantic of the level, you just provide it using the level property from 1 to 6.
import {Provider , Heading } from '@clayui/core' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<Heading level = {1 } weight = "semi-bold" >
h1. Heading Level 1
</Heading >
<Heading level = {2 } weight = "semi-bold" >
h2. Heading Level 2
</Heading >
<Heading level = {3 } weight = "semi-bold" >
h3. Heading Level 3
</Heading >
<Heading level = {4 } weight = "semi-bold" >
h4. Heading Level 4
</Heading >
<Heading level = {5 } weight = "semi-bold" >
h5. Heading Level 5
</Heading >
<Heading level = {6 } weight = "semi-bold" >
h6. Heading Level 6
</Heading >
</div >
</Provider >
);
}Show code Font Weights
In the same way, Heading component provides some styles depending on the weight. You can check them here .
import {Provider , Heading } from '@clayui/core' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<Heading level = {3 } weight = "lighter" >
Heading with ligther weight
</Heading >
<Heading level = {3 } weight = "light" >
Heading with light weight
</Heading >
<Heading level = {3 } weight = "normal" >
Heading with normal weight
</Heading >
<Heading level = {3 } weight = "semi-bold" >
Heading with semi-bold weight
</Heading >
<Heading level = {3 } weight = "bold" >
Heading with bold weight
</Heading >
<Heading level = {3 } weight = "bolder" >
Heading with bolder weight
</Heading >
</div >
</Provider >
);
}Show code API Reference
Heading { ({ children , fontSize , level , weight , }: Props ): JSX .Element ; displayName : string ; }Parameters Properties fontSize Level | undefined
Determines the font size of the heading regardless of the tag.
level Level | undefined = 1
Number to set the heading level.
weight WeightFont | undefined = "bold"
Determines the weight of the font.
Returns ElementEdit this page on GitHub Contributors
Matuzalém Teles, Sergio Jimenez del Coso
Last edited May 9, 2025 at 6:15:38 AM
