Heading
Typography
Presentational
Introduction
A versatile, polymorphic typographic component used to render page titles, section subtitles, and nested headers with standardized scaling, margins, weights, and color tokens.
The Heading component is fully integrated as a heading block in the Page Builder, allowing Sveltia CMS writers and administrators to easily manage heading levels, sizing, and text copy directly within page builder templates.
Usage
These configurations represent exactly how page-builder block items are constructed.
1. Primary Page Title (H1 Level / Extra Large)
The main heading of a page. Must be used exactly once per layout page for optimal search engine indexing.
{
"type": "heading",
"text": "Welcome to our Platform",
"as": "h1",
"size": "3xl"
}
Welcome to our Platform
2. Section Subtitle (H2 Level / Medium Size)
Used to divide page layouts into secondary logical sections. Inherits a smaller sizing footprint.
{
"type": "heading",
"text": "Product Offerings",
"as": "h2",
"size": "xl"
}
Product Offerings
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Heading Text (text) | string | - | The plain-text title string to render on-screen. |
HTML Tag Element (as) | select | "h2" | The semantic HTML element written to the page output. • Options: "h1", "h2", "h3", "h4", "h5", "h6", "span", "div". |
Size Scaling (size) | select | "xl" | Font dimension preset mapping directly to theme tokens. • Options: "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl". |
Enable Hydration (interactive) | boolean | false | When true, hydrates the component as a client island. Typographic elements are static by default. |
Technical & SEO Implementation
- Polymorphic Rendering: The tag assigned to the
asproperty determines the semantic HTML tag generated on the server (e.g.,<h1>vs<h3>), while styling is strictly driven by thesizeproperty. This allows developers to maintain perfect heading tag structures for search engine crawlers (SEO) while configuring visual sizing independently. - Zero Runtime Style Inflation: The styling classes are compiled pre-build using Panda CSS. It injects consistent font weights, letter spacing, and line heights matched automatically for each text scale.