#Introduction

The Heading component is a flexible, semantic heading component designed for consistent typography hierarchy. It provides responsive font sizing, proper semantic HTML structure, and dark mode support while maintaining accessibility standards.

Perfect for creating clear content hierarchy without the hassle of managing font sizes and semantic levels across your application.

#Installation

Use the fluxtor artisan command to install the heading component easily:

php artisan fluxtor:install heading

Once installed, you can use the <x-ui.heading /> component in any Blade view.

#Usage

    <x-ui.heading level="h1" size="xl">Main Page Title</x-ui.heading>
    <x-ui.heading level="h2" size="lg">Section Heading</x-ui.heading>
    <x-ui.heading level="h3" size="md">Subsection Title</x-ui.heading>

#Customization

#Size

The size prop controls the visual size of the heading independent of its semantic level. Default is md.

<x-ui.heading size="xs">Extra Small heading</x-ui.heading>
<x-ui.heading size="sm">Small heading</x-ui.heading>
<x-ui.heading size="md">Medium heading</x-ui.heading>
<x-ui.heading size="lg">Large heading</x-ui.heading>
<x-ui.heading size="xl">Extra Large heading</x-ui.heading>

#Semantic Levels

Use the level prop to set the appropriate HTML heading tag for proper document structure and accessibility. Default is h2.

<x-ui.heading level="h1" size="lg">H1 - Page Title</x-ui.heading>
<x-ui.heading level="h2" size="md">H2 - Section Title</x-ui.heading>
<x-ui.heading level="h3" size="sm">H3 - Subsection Title</x-ui.heading>
<x-ui.heading level="h4" size="sm">H4 - Sub-subsection Title</x-ui.heading>
<x-ui.heading level="h5" size="xs">H5 - Minor Heading</x-ui.heading>
<x-ui.heading level="h6" size="xs">H6 - Smallest Heading</x-ui.heading>

#Component Props