Heading
BetaHeading 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
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';
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.
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>
);
}
Table of Contents