Ariakit
/

Heading

Add automatic hierarchy to your page contents so users can easily navigate them. This component is based on the WAI-ARIA Heading Role.

Open preview in a new tab

Heading 1

Torquent penatibus ipsum nascetur cursus primis lobortis

Heading 2

Volutpat metus id purus dignissim fusce Tellus egestas.

Heading 2

Platea justo lectus. Praesent. Et sodales pellentesque

Edit withViteNext.js
import "./style.css";
import { Heading, HeadingLevel } from "@ariakit/react";
export default function Example() {
return (
<div className="wrapper">
<Heading className="heading">Heading 1</Heading>
<p>Torquent penatibus ipsum nascetur cursus primis lobortis</p>
<Heading className="heading">Heading 2</Heading>
<p>Volutpat metus id purus dignissim fusce Tellus egestas.</p>
<Heading className="heading">Heading 2</Heading>
<p>Platea justo lectus. Praesent. Et sodales pellentesque</p>
</div>
);
}

API

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue