Text
Introduction
The foundational typographic component used to render body copy, paragraphs, descriptions, or short textual span highlights with consistent tracking, line-heights, and responsive font-sizing.
The Text component is fully integrated as a standard text block inside the Page Builder, enabling Sveltia CMS authors to configure text copy, font sizing, and polymorphic HTML elements directly inside the page layouts.
Usage
These configurations represent exactly how page-builder block items are constructed.
1. Large Body Lead Paragraph
An optimized larger paragraph text commonly placed directly beneath heading blocks to introduce a page, highlight key metrics, or set article summaries.
{
"type": "text",
"content": "This is a main lead paragraph describing the core platform features. It scales larger for optimal legibility.",
"size": "lg",
"as": "p"
}
This is a main lead paragraph describing the core platform features. It scales larger for optimal legibility.
2. Standard Descriptive Body Copy
A standard body paragraph block used to describe features, write extensive documentation notes, or document specifications.
{
"type": "text",
"content": "Pulse analytics provides sub-second database synchronization loops across all active workspace zones instantly.",
"size": "md",
"as": "p"
}
Pulse analytics provides sub-second database synchronization loops across all active workspace zones instantly.
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Text Content (content) | string | - | The raw text copy or paragraph content to render on-screen. |
HTML Tag Element (as) | select | "p" | Semantic HTML element written to the page output. • Options: "p", "span", "div", "small". |
Size Scaling (size) | select | "md" | Typographic size preset. • Options: "xs", "sm", "md", "lg", "xl", "2xl". |
Visual Variant (variant) | string | - | Custom visual styling rules or predefined utility classes. |
Technical Implementation Notes
- Polymorphic Layouts: The HTML element generated on the server is determined by the
asproperty (e.g.,<p>vs<span>), while visual styling remains independent. This allows developers to maintain perfect semantic layout rules for SEO indexing while adjusting visual text sizing freely. - Atomic Styles with Panda CSS: Sizing styles are precompiled on build into atomic utility classes. This provides optimal letter tracking, vertical line heights, and margins to eliminate lay-out shifts while navigating.
- Static Delivery: Typographic elements contain no interactive JavaScript. Setting
"interactive": trueis accepted but typographic copy remains fully static by default.