Components

Heading

A versatile Heading component for displaying titles, overtitles, and descriptions with customizable sizes, alignments, and spacing options.

Component

View code

Show playground

Heading title

Props

Props	Required	Default	Type
`overtitle`	—	—	`string`
`isOverTitleUppercase`	—	`false`	`boolean`
`title`	—	`'Heading title'`	`string`
`description`	—	—	`string`
`align`	—	`Align.LEFT`	`Align`
`size`	—	`HeadingSize.LG`	`HeadingSize`
`spacing`	—	`HeadingSpacing.NORMAL`	`HeadingSpacing`
`headingTag`	`true`	—	`HeadingTag`
`isMobileCentered`	—	`false`	`boolean`
`overtitleClass`	—	—	`string`
`titleClass`	—	—	`string`
`descriptionClass`	—	—	`string`

Slots

Name	Description
`overtitle`	Template to render custom content inside the overtitle slot. If used, the overtitle prop will be ignored.
`title`	Template to render custom content inside the title slot. If used, the title prop will be ignored.
`description`	Template to render custom content inside the description slot. If used, the description prop will be ignored.

 <template>
    <Heading
        :size="HeadingSize.XL"
        headingTag="h1"
    >
        <template #overtitle>
            Overtitle
        </template>

        <template #title>
            <Icon name="mdi:star" /> Custom Title
        </template>

        <template #description>
            Description content goes here.
        </template>
    </Heading>
</template>

Usage

overtitle

You can provide an overtitle to the heading component to display a smaller title above the main title.

 <template>
    <Heading
        overtitle="Section"
    />
</template>

Type: string

isOverTitleUppercase

The isOverTitleUppercase prop allows you to display the overtitle in uppercase letters.

 <template>
    <Heading
        overtitle="Section"
        :isOverTitleUppercase="true"
        headingTag="h1"
    />
</template>

Type: boolean
Default: false

title

The title prop allows you to set the main title of the heading component.

 <template>
    <Heading
        title="Main Heading"
        headingTag="h1"
    />
</template>

Type: string
Default: 'Heading title'

description

You can add a description below the title to provide additional context or information.

 <template>
    <Heading
        description="This is a description for the heading."
        headingTag="h1"
    />
</template>

Type: string

align

The align prop allows you to set the text alignment of the heading component. You can choose between left, center, or right alignment.

 <template>
    <Heading
        :align="Align.CENTER"
    />
</template>

Type: Align
Default: Align.LEFT

Options

Value	Description
`LEFT`	Aligns the heading to the left.
`CENTER`	Centers the heading.
`right`	Aligns the heading to the right.

size

You can adjust the size of the heading using the size prop. It uses the HeadingSize enum.

 <template>
    <Heading
        :size="HeadingSize.XL"
        headingTag="h1"
    />
</template>

Type: HeadingSize
Default: HeadingSize.LG

Options

Value	Description
`XXS`	Extra extra small size for the heading.
`XS`	Extra small size for the heading.
`SM`	Small size for the heading.
`MD`	Medium size for the heading.
`LG`	Large size for the heading.
`XL`	Extra large size for the heading.

spacing

The spacing prop allows you to control the spacing below the heading. It uses the HeadingSpacing enum.

 <template>
    <Heading
        :spacing="HeadingSpacing.SPACED"
    />
</template>

Type: HeadingSpacing
Default: HeadingSpacing.NORMAL

Options

Value	Description
`NORMAL`	Appplies normal spacing below the heading.
`SPACED`	Applies increased spacing below the heading.

headingTag

You can specify the HTML tag to be used for the heading title using the headingTag prop.

 <template>
    <Heading
        headingTag="h1"
    />
</template>

Type: HeadingTag
Required: true

isMobileCentered

The isMobileCentered prop allows you to center the heading on mobile devices.

 <template>
    <Heading
        isMobileCentered
    />
</template>

Type: boolean
Default: false

overtitleClass

You can apply custom CSS classes to the overtitle using the overtitleClass prop.

 <template>
    <Heading
        overtitle="Section"
        overtitleClass="text-gray-500"
        headingTag="h1"
    />
</template>

Type: string

titleClass

You can apply custom CSS classes to the title using the titleClass prop.

 <template>
    <Heading
        title="Main Heading"
        titleClass="font-bold"
        headingTag="h1"
    />
</template>

Type: string

descriptionClass

You can apply custom CSS classes to the description using the descriptionClass prop.

 <template>
    <Heading
        description="This is a description for the heading."
        descriptionClass="text-gray-600"
        headingTag="h1"
    />
</template>

Type: string