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';`

Table of Contents

Introduction
Level
Font Weights
API Reference

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.

Open Sandbox

import {Provider, Heading} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/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>
	);
}

Font Weights

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

Open Sandbox

import {Provider, Heading} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/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>
	);
}

API Reference

Heading

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

Parameters

Properties

children

React.ReactNode

Heading content.

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

Table of Contents

Introduction
Level
Font Weights
API Reference