A flexible heading component that supports different levels, sizes, and variants.
Use the level prop to change the semantic HTML tag (h1-h6).
<x-ui::heading level="1">Heading 1</x-ui::heading>
<x-ui::heading level="2">Heading 2</x-ui::heading>
<x-ui::heading level="3">Heading 3</x-ui::heading>
<x-ui::heading level="4">Heading 4</x-ui::heading>
<x-ui::heading level="5">Heading 5</x-ui::heading>
<x-ui::heading level="6">Heading 6</x-ui::heading>Override the default level sizing using the size prop.
<x-ui::heading level="1" size="5xl">Heading 5XL</x-ui::heading>
<x-ui::heading level="2" size="2xl">Heading 2XL</x-ui::heading>
<x-ui::heading level="3" size="lg">Heading Large</x-ui::heading>
<x-ui::heading level="4" size="sm">Heading Small</x-ui::heading>Apply semantic color variants to the heading.
<x-ui::heading level="4" variant="default">Default Heading</x-ui::heading>
<x-ui::heading level="4" variant="muted">Muted Heading</x-ui::heading>
<x-ui::heading level="4" variant="primary">Primary Heading</x-ui::heading>
<x-ui::heading level="4" variant="danger">Danger Heading</x-ui::heading>