Heading

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

Heading

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 withVite Next.js

12345678910111213141516171819202122
import "./style.css";
import { Heading, HeadingLevel } from "@ariakit/react";

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

import "./style.css";
import { Heading, HeadingLevel } from "@ariakit/react";

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

API

<HeadingLevel>
  <Heading />
</HeadingLevel>
<HeadingLevel>
  <Heading />
</HeadingLevel>

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Components.

Read latest issue