Display semantic headings with consistent typography and optional styling. The <x-andach-h> component renders a heading tag from h1 to h6, depending on the value of the number attribute.
The heading component supports 9 variants:
<x-andach-h number="2" variant="default">Default heading</x-andach-h>
<x-andach-h number="2" variant="dark">Dark heading</x-andach-h>
<x-andach-h number="2" variant="light">Light heading</x-andach-h>
<x-andach-h number="2" variant="brand">Brand heading</x-andach-h>
<x-andach-h number="2" variant="primary">Primary heading</x-andach-h>
<x-andach-h number="2" variant="secondary">Secondary heading</x-andach-h>
<x-andach-h number="2" variant="success">Success heading</x-andach-h>
<x-andach-h number="2" variant="warning">Warning heading</x-andach-h>
<x-andach-h number="2" variant="danger">Danger heading</x-andach-h>In addition to these unique variables, there are also generic arguments available for all components.
| Attribute Name | Type | Default Value | Description |
|---|---|---|---|
| number | int | 1 | The heading level, from 1 to 6. Renders the appropriate HTML tag (h1 to h6). |
<x-andach-h number="1">Heading 1</x-andach-h>
<x-andach-h number="2">Heading 2</x-andach-h>
<x-andach-h number="3">Heading 3</x-andach-h>
<x-andach-h number="4">Heading 4</x-andach-h>
<x-andach-h number="5">Heading 5</x-andach-h>
<x-andach-h number="6">Heading 6</x-andach-h><x-andach-h number="2" variant="primary" :border="true">Border heading</x-andach-h>
<x-andach-h number="2" variant="warning" :ring="true">Ring heading</x-andach-h>
<x-andach-h number="2" variant="success" :shadow="true">Shadow heading</x-andach-h>
<x-andach-h number="2" variant="danger" :rounded="true">Rounded heading</x-andach-h>