#Basic

Hello world

<H2>Hello world</H2>

#Alongside paragraphs

Hello world

Illo quia quam perferendis ut consectetur rerum dolores dolores. Reiciendis est beatae magnam ut amet quis sequi. Eaque consequatur consectetur non amet nostrum quo animi.

Quod enim vitae et. Impedit ut maxime fugit excepturi harum qui.Praesentium pariatur nisi ut rerum et dolores sed.

<div>
  <H2>Hello world</H2>
  <Text>
    <p>
      Illo quia quam perferendis ut consectetur rerum dolores dolores.
      Reiciendis est beatae magnam ut amet quis sequi. Eaque consequatur
      consectetur non amet nostrum quo animi.
    </p>
    <p>
      Quod enim vitae et. Impedit ut maxime fugit excepturi harum
      qui.Praesentium pariatur nisi ut rerum et dolores sed.
    </p>
  </Text>
</div>

#Without default margins

By default, there is a top and bottom margin applied to the heading. This is helpful a) by providing a sensible default and b) by helping you maintain consistent spacing throughout your app. However, you can override these default margins if you'd like as shown below.
The example below uses Tailwind's imporant modifier to make sure that the custom margins take precedence over the original margins. You may need or want to take a different approach.

Hello world

<H2 class="!my-2">Hello world</H2>

#In-page link

Makes the header an in-page link.
<H2 inPageLink="hello-world">
  Hello world
</H2>
Gets transformed into something like:
<h2 id="hello-world">
  <a href="#hello-world">Hello world</a>
</h2>

#Hello world

<H2 inPageLink="hello-world">Hello world</H2>

#Props

inPageLink
Required
false
Type
string
Default
none
Notes
Makes the header an in-page link by returning the following:
<h2 id={inPageLink} class={className} {...restWithoutClass}>
  <Link href={`#${inPageLink}`} underline="hover">{children}</Link>
</h2>
children*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
ComponentProps<"h2">
Default
none
Notes
See the docs for rest parameters. For H2, you could pass anything you normally would pass to <h2> because the return value looks something like this:
<h2
  class={className}
  {...restWithoutClass}
>
  ...
</h2>