Heading

A semantic heading element. Set the HTML level independently from the visual size, and optionally apply serif or mono font families.

Basic usage

Section heading

<x-boson::heading level="2">Section heading</x-boson::heading>

Sizes

Large heading

Extra large heading

2XL heading

3XL heading

4XL heading

5XL heading

<x-boson::heading size="lg">Large heading</x-boson::heading>
<x-boson::heading size="xl">Extra large heading</x-boson::heading>
<x-boson::heading size="2xl">2XL heading</x-boson::heading>
<x-boson::heading size="3xl">3XL heading</x-boson::heading>
<x-boson::heading size="4xl">4XL heading</x-boson::heading>
<x-boson::heading size="5xl">5XL heading</x-boson::heading>

Levels

h1 — Page title

h2 — Section title

h3 — Sub-section title

h4 — Group title

<x-boson::heading level="1" size="3xl">h1 — Page title</x-boson::heading>
<x-boson::heading level="2" size="2xl">h2 — Section title</x-boson::heading>
<x-boson::heading level="3" size="xl">h3 — Sub-section title</x-boson::heading>
<x-boson::heading level="4" size="lg">h4 — Group title</x-boson::heading>

Font families

Default (sans-serif)

Serif heading

Mono heading

<x-boson::heading size="2xl">Default (sans-serif)</x-boson::heading>
<x-boson::heading size="2xl" serif>Serif heading</x-boson::heading>
<x-boson::heading size="2xl" mono>Mono heading</x-boson::heading>

With description

Account settings

Manage your account preferences and personal information.

<x-boson::heading size="xl">Account settings</x-boson::heading>
<x-boson::description>Manage your account preferences and personal information.</x-boson::description>

Props

Prop	Type	Default	Description
`level`	`int`	`null`	Semantic heading level (1-6), renders h1-h6. Defaults to div when not set.
`size`	`string`	`null`	Visual size: lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl
`serif`	`bool`	`false`	Apply serif font family
`mono`	`bool`	`false`	Apply monospace font family