1. Components
  2. heading

Heading

Structured heading levels (H1-H5) with consistent sizing and semantic hierarchy.

Demo

Heading Level 1

Heading Level 2

Heading Level 3 

<div class="space-y-4">
    <x-ui.heading level="1">Heading Level 1</x-ui.heading>
    <x-ui.heading level="2">Heading Level 2</x-ui.heading>
    <x-ui.heading level="3">Heading Level 3</x-ui.heading>
</div>

Installation

Shell 
php artisan flexi:add heading

Usage

The Heading component provides semantic heading levels (H1-H5) with consistent sizing. Use the level prop to set the heading level, and intent for color styling.

Examples

Levels

H1 - Page Title

H2 - Section Title

H3 - Subsection

H4 - Card Title

H5 - Small Heading 
<div class="space-y-4">
    <x-ui.heading level="1">H1 - Page Title</x-ui.heading>
    <x-ui.heading level="2">H2 - Section Title</x-ui.heading>
    <x-ui.heading level="3">H3 - Subsection</x-ui.heading>
    <x-ui.heading level="4">H4 - Card Title</x-ui.heading>
    <x-ui.heading level="5">H5 - Small Heading</x-ui.heading>
</div>

Intents

Title intent (default)

Body intent

Muted intent

Primary intent

Secondary intent

Danger intent

Warning intent 

<div class="space-y-4">
    <x-ui.heading level="3" intent="title">Title intent (default)</x-ui.heading>
    <x-ui.heading level="3" intent="body">Body intent</x-ui.heading>
    <x-ui.heading level="3" intent="muted">Muted intent</x-ui.heading>
    <x-ui.heading level="3" intent="primary">Primary intent</x-ui.heading>
    <x-ui.heading level="3" intent="secondary">Secondary intent</x-ui.heading>
    <x-ui.heading level="3" intent="danger">Danger intent</x-ui.heading>
    <x-ui.heading level="3" intent="warning">Warning intent</x-ui.heading>
</div>

API

Prop Description
level (1|2|3|4|5)
Heading level determining the HTML tag (h1-h5) and size.
intent (title|body|muted|primary|secondary|danger|warning)
Semantic color intent for the heading.
Prev
Text

Semantic text compon...

On this page