Text

A simple paragraph component for body copy, descriptions, and supporting text. It allows alignment, size, 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. This property is required.

align

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

Tip: Use 'left' for most paragraph text (best readability), 'center' for centered messages or calls‑to‑action, and 'right' sparingly for specific design needs.

size

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

Tip: Use 'm' (20px) for standard body text (default) and 's' (16px) for compact text or secondary information.

color

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

Tip: Use 'default' for main body text and '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: Use 600-800px for optimal line length (65-75 characters); 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.

Tip: 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 the 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