Heading

A consistent heading and subheading component for your application.

User profile

This information will be displayed publicly.

<x-heading>User profile</x-heading>
<x-subheading>This information will be displayed publicly.</x-subheading>

Sizes

Use the


    size

prop to change the visual style of the button. The default value is


    base

Default

14px · Use liberally—think input and toast labels.

Large

16px · Use sparingly—think modal and card headings.

Extra large

24px · Use rarely—think hero text.

<x-heading size="base">Default</x-heading>
<x-heading size="lg">Large</x-heading>
<x-heading size="xl">Extra large</x-heading>

Heading level

Control the heading level:

h1

h2

h3

, that will be used for the heading element. Without a


    level

prop, the heading will default to a

div

User profile

This information will be displayed publicly.

<x-heading level="3">User profile</x-heading>
<x-subheading>This information will be displayed publicly.</x-subheading>

Leading subheading

Subheadings can be placed above headings for a more interesting arrangment.

Year to date

$7,532.16

15.2%

<x-card>
    <x-subheading>Year to date</x-subheading>
 
    <x-heading size="xl" class="mb-1">$7,532.16</x-heading>
 
    <div class="flex items-center gap-2">
        <x-icon.o-arrow-trending-up class="text-green-600 dark:text-green-500 size-4" />
 
        <span class="text-sm text-green-600 dark:text-green-500">15.2%</span>
    </div>
</x-card>