Heading

A heading/title text element with semantic HTML tag support (H1-H6) and comprehensive typography controls.

Overview

The Heading element creates semantic HTML headings that establish content hierarchy. It supports all six heading levels (H1-H6) and inherits brand-specific typography from the active theme.

Live Preview

Code

1<h1 class="heading heading-h1">H1 Heading</h1>
2<h2 class="heading heading-h2">H2 Heading</h2>
3<h3 class="heading heading-h3">H3 Heading</h3>
4<h4 class="heading heading-h4">H4 Heading</h4>
5<h5 class="heading heading-h5">H5 Heading</h5>
6<h6 class="heading heading-h6">H6 Heading</h6>

Brand Properties

The following table maps CRAFT HeadingComponent properties to brand-specific values. Font options available in CRAFT: Open Sans, Larken, Playfair Display, Lato, Inter, Roboto. Weight options: light (300), normal (400), medium (500), semibold (600), bold (700). Html Tag options: H1, H2, H3, H4, H5, H6.

Accessibility

• Use heading levels in order (don't skip from H1 to H3)
• Only use one H1 per page
• Headings should describe the content that follows
• Maintain proper heading hierarchy for screen readers

Related Components

• Paragraph Element
• Basic Text Components

Unmapped Brand Values

The following brand guideline values cannot be directly mapped to CRAFT HeadingComponent properties. These values represent brand identity elements, strategic positioning, or properties that apply to other components.