Text

A simple paragraph component for body copy, descriptions, and supporting text. It allows alignment, sizing, and color customization.

Use Cases

• Paragraph text and body copy
• Descriptions and explanations
• Supporting text under headings
• Instructions and helper text
• Short informational messages

Properties

text

Plain text content (no HTML formatting) Type: string.

align

Text alignment Type: string. Options: left, center, right Default: left

Tip:

• body-text: Use ‘left’ for most paragraph text (best readability)
• messages: Use ‘center’ for centered messages or calls-to-action
• special: Use ‘right’ sparingly for specific design needs

size

Text size Type: string. Options: s, m Default: m

Visual Impact:

• s: 16px - Small text
• m: 20px - Medium text (default)

Tip:

• standard: Use ‘m’ (20px) for standard body text (default)
• compact: Use ‘s’ (16px) for compact text or secondary information

color

Text color theme Type: string. Options: default, muted Default: default

Visual Impact:

• default: Standard text color (inherits from parent, typically black/dark)
• muted: Muted gray color for secondary or less prominent text

Tip:

• primary: Use ‘default’ for main body text
• secondary: Use ‘muted’ for supporting text, captions, or secondary information

padding

CSS padding value for spacing around text Type: string.

maxWidth

Maximum width for optimal readability. Use 600-800px for comfortable reading (65-75 characters per line). Type: string.

Tip:

• readability: Use 600-800px for optimal line length (65-75 characters)
• full-width: Use ‘100%’ only when full width is needed (e.g., short text in narrow containers)

customCss

Custom CSS styles for advanced styling. Parsed as CSS property-value pairs. Type: string.

Security Note: Parsed by cssParser utility. Tenants only affect their own pages (multi-tenant isolation enforced).

Best Practices

• Use Text for paragraphs and body copy – use Heading for titles
• Keep maxWidth at 600-800px for optimal readability (65-75 characters per line)
• Use size: ‘m’ (default) for standard body text, size: ‘s’ for compact text
• Use color: ‘default’ for primary text, color: ‘muted’ for secondary information
• Use align: ‘center’ for centered messages, align: ‘left’ for body text
• For rich formatting (bold, italic, links), use RichText instead

Common Mistakes

Not setting maxWidth for long paragraphs

Why it's a problem: Lines too long (100+ characters) are hard to read – eyes struggle to track back to next line

Fix: Set maxWidth: '700px' for optimal readability (65-75 characters per line)

Using Text for formatted content with bold/italic/links

Why it's a problem: Text only supports plain text – HTML formatting will be displayed as raw HTML

Fix: Use RichText component for content with bold, italic, links, or HTML formatting

Using Text for headings or titles

Why it's a problem: No semantic HTML structure – bad for accessibility and SEO

Fix: Use Heading component for titles and headers