Headings

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:

Default heading

Dark heading

Light heading

Brand heading

Primary heading

Secondary heading

Success heading

Warning heading

Danger heading

<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>

Customisation

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`).

Usage Examples

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<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>

Attributes

Border heading

Ring heading

Shadow heading

Rounded heading

<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>