← All components

Heading

slug: heading

Generic page heading with inline markdown-style expressions: `**text**` renders a horizontal gradient fill, `` `text` `` renders a gradient underline. Pick a tone (light/dark), size (h1/h2/h3) and alignment.

1. Plain
text: "The marketing growth system made for the automotive aftermarket"

The marketing growth system made for the automotive aftermarket

2. Gradient highlight (**bold pair**)
text: "The **marketing growth system** made for the automotive aftermarket"

The marketing growth system made for the automotive aftermarket

3. Gradient underline (`backticks`)
text: "Get ahead in the automotive aftermarket with `social-first` content strategy"

Get ahead in the automotive aftermarket with social-first content strategy

4. Both expressions in one heading
text: "**Marketing** for the `aftermarket` industry"

Marketing for the aftermarket industry

5. Dark tone (white text on navy)
text: "Get ahead in the automotive aftermarket with `social-first` content strategy", tone: "dark"

Get ahead in the automotive aftermarket with social-first content strategy

6. Size h1 (56px)
size: "h1"

Hero-sized display heading

7. Size h2 (48px, default)
size: "h2"

Section-sized display heading

8. Size h3 (32px)
size: "h3"

Smaller display heading

9. Alignment — left
align: "left"

Left-aligned heading example

10. Alignment — right
align: "right"

Right-aligned heading example

Rendering with default fixtures. Source: apps/web/src/components/blocks/Heading.fixtures.ts
Design system