Heading

Beta

Heading creates a title or subject of an article or another piece of written work.

installyarn add @clayui/core
versionNPM Version
useimport {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.

Font Weights

In the same way, Heading component provides some styles depending on the weight. You can check them here.

API Reference

Heading

{ ({ children, fontSize, level, weight, }: Props): JSX.Element; displayName: string; }
Parameters
Properties

children

React.ReactNode

Heading content.

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
Element
Edit this page on GitHub

Contributors

Matuzalém Teles, Sergio Jimenez del Coso

Last edited May 9, 2025 at 6:15:38 AM