A flexible header component using semantic tags.
| Property | Type | Description |
|---|---|---|
| title | ?string | The title of the header. |
| title-class | ?string | The class to apply to the title. |
| subtitle | ?string | The subtitle of the header. |
| subtitle-class | ?string | The class to apply to the subtitle. |
| container-class | ?string | The class to apply to the outer container. |
| anchor | null|bool|string | If bool use title as link, otherwise use this as link. No link if null. |
| level | ?string | The header level to use. This is the html tag name. |
| divider | bool | If a divider should be shown below the header. |
| divider-class | ?string | The class to apply to the divider. |
| progress | null|bool|string | If a progress bar should be shown on load or the target. |
| progress-class | ?string | The class to apply to the progress bar. |
| icon | ?string | The icon that is rendered in front of the header. |
| icon-class | ?string | The class to apply to the icon. |
| end | slot | This slot is rendered at the end of the header row before the divider. |
Using h1 tag
Using h2 tag
Using h3 tag
Using h4 tag
Using h5 tag
Using h6 tag
Using div tag
Using custom style
<c-h1 title="Using h1 tag" />
<c-h2 title="Using h2 tag" />
<c-h3 title="Using h3 tag" />
<c-h4 title="Using h4 tag" />
<c-h5 title="Using h5 tag" />
<c-h6 title="Using h6 tag" />
<c-header title="Using div tag" />
<c-header title="Using custom style" title-class="text-[2rem] font-extralight text-primary" />
With subtitle
This is the subtitle.
With subtitle
This is the subtitle.
With subtitle
This is the subtitle.
With subtitle
This is the subtitle.
With subtitle
This is the subtitle.
With subtitle
This is the subtitle.
With subtitle
This is the subtitle.
<c-h1 title="With subtitle" subtitle="This is the subtitle." />
<c-h2 title="With subtitle" subtitle="This is the subtitle." />
<c-h3 title="With subtitle" subtitle="This is the subtitle." />
<c-h4 title="With subtitle" subtitle="This is the subtitle." />
<c-h5 title="With subtitle" subtitle="This is the subtitle." />
<c-h6 title="With subtitle" subtitle="This is the subtitle." />
<c-header title="With subtitle" subtitle="This is the subtitle." />
With icon
With icon
With icon
With icon
With icon
With icon
With icon
With icon
<c-h1 title="With icon" icon="zap" icon-class="h-7 w-7" />
<c-h2 title="With icon" icon="zap" icon-class="h-7 w-7" />
<c-h3 title="With icon" icon="zap" icon-class="h-6 w-6" />
<c-h4 title="With icon" icon="zap" icon-class="h-6 w-6" />
<c-h5 title="With icon" icon="zap" />
<c-h6 title="With icon" icon="zap" />
<c-header title="With icon" icon="zap" />
<c-header title="With icon" icon="zap" icon-class="bg-primary text-primary-content rounded-full p-px" />
Divider only
Divider with custom class
Progress only
Progress and divider
Progress and divider with custom class
Progress with custom target
<c-h1 title="Divider only" divider />
<c-h2 title="Divider with custom class" divider divider-class="mt-3 mx-16 w-auto!" />
<c-h3 title="Progress only" progress />
<c-h4 title="Progress and divider" progress divider />
<c-h5 title="Progress and divider with custom class" progress
progress-class="mt-3 mx-16 w-auto! progress-accent" divider divider-class="mt-3 mx-16 w-auto!" />
<c-header title="Progress with custom target" divider progress="customTarget" />
<div class="flex justify-end gap-4 mt-6">
<c-button wire:click="sleep(2)" class="btn-default" label="Sleep" spinner />
<c-button wire:click="customTarget" class="btn-primary" label="Custom target" spinner />
</div>
This is the title
new
Wow, everything is customizable!
<c-header subtitle="This is responsive" divider>
<c-slot:title>
This is the title <c-badge label="new" class="ms-1 badge-info badge-sm" />
</c-slot:title>
<c-slot:subtitle>
Wow, everything is <span class="italic text-accent">customizable</span>!
</c-slot:subtitle>
<c-slot:end>
<c-button icon="funnel" class="btn-square" />
<c-button icon="plus" class="btn-primary btn-square" />
</c-slot:end>
</c-header>