Heading
H1–H6 title, plain or rich text, with alignment and optional link.
Type: "heading"
Props
| Field | Type | Required | Default | Notes |
|---|---|---|---|---|
text | string (max 300) | ✓ | "Heading Baru" | Heading text (plain mode) |
level | 'h1'|'h2'|'h3'|'h4'|'h5'|'h6' | ✓ | "h2" | HTML heading level |
alignment | 'left'|'center'|'right' | ✓ | "left" | Text alignment |
link | string (URL, max 2000) | — | — | Wrap heading in <a> |
mode | 'plain'|'rich' | — | "plain" | Plain text or rich HTML |
richText | string (HTML, max 10000) | — | — | HTML when mode = "rich" |
Example: plain centered H1
{
"id": "h001abcd",
"type": "heading",
"props": {
"text": "Build Websites Without Code",
"level": "h1",
"alignment": "center"
}
}
Example: H2 with link
{
"id": "h002efgh",
"type": "heading",
"props": {
"text": "Read Our Blog",
"level": "h2",
"alignment": "left",
"link": "/blog"
}
}
Example: rich heading with bold + color
{
"id": "h003ijkl",
"type": "heading",
"props": {
"text": "Heading",
"level": "h2",
"alignment": "left",
"mode": "rich",
"richText": "<strong>50%</strong> <span style=\"color:#dc2626\">OFF</span> this week!"
}
}
Example: responsive style
{
"id": "h004mnop",
"type": "heading",
"props": { "text": "Tagline", "level": "h1", "alignment": "center" },
"style": {
"desktop": { "typography": { "fontSize": "64px", "fontWeight": "800" } },
"tablet": { "typography": { "fontSize": "48px" } },
"mobile": { "typography": { "fontSize": "32px" } }
}
}