The Text block is a flexible text component that can display paragraphs or headings with full control over layout, typography, truncation, and appearance.
You can use it for descriptions, headings, captions, highlights, notices, or rich content inside any section that supports blocks.
How to use
Add a Text block inside a section.
Enter your text content.
Adjust layout, typography, and appearance settings as needed.
Content
Text
Enter the text you want to display. Supports basic rich text formatting.
Layout
You can control width and alignment independently for desktop and mobile.
Width
Fit content — block width follows the text size.
Fill — block stretches to available width.
Custom — set a custom width percentage.
Alignment
Set text alignment for desktop and mobile:
Left
Center
Right
Typography
Style (HTML tag)
Choose how the text is rendered:
Paragraph (
p)Heading (
H1–H6)
Use HTML heading tag
When enabled, the selected heading tag (H1–H6) will be used for SEO and accessibility.
If disabled, the text is styled visually as a heading but rendered as a regular element.
Font size scale
Adjust text size from 50% to 150% of the base size.
Line height
Control spacing between lines:
Auto (theme default)
Tight → Airy (various spacing options)
Text case
Default
Uppercase
Caption style (Paragraph only)
Turn paragraph text into a caption-style label with letter spacing.
Caption sizes:
Small
Medium
Large
Note: Caption style is only available when Style = Paragraph.
Text color
Text — uses theme foreground color.
Button — uses button text color.
Custom — choose any custom color.
Truncated text (Read more)
Allows long text to be collapsed with a Read more toggle.
Enable truncated text — turn truncation on/off.
Visible height — height of visible text before truncation.
Read more label — customize the button text.
Use this when displaying long descriptions, policies, or expandable content.
Appearance
Background
Add a background behind the text:
Solid color (with opacity)
Gradient background
Border
None
Solid
Dashed
You can control:
Border width
Border opacity
Corner radius
Corner radius applies when background or border is enabled.
Padding
Control inner spacing around the text block:
Top
Bottom
Left
Right
Tips & best practices
Use Heading (H1–H6) for titles and important content hierarchy.
Use Paragraph + Caption style for small labels, subtitles, or metadata.
Use Truncated text for long descriptions to keep layouts clean.
Avoid very large font scale with small containers to prevent overflow.
When using Custom width, test both desktop and mobile for readability.
Comments
0 comments
Please sign in to leave a comment.