Basic Text Components
7 text-focused components for headlines, paragraphs, quotes, and informational blocks. These components combine Heading and Paragraph elements in common layouts.
Heading + Paragraph
The most fundamental text component - a heading followed by body text.
The Ancient Wisdom of Ayurveda
For over 5,000 years, Ayurveda has offered time-tested solutions for holistic wellness. Our products harness this ancient knowledge, combining traditional formulations with modern skincare science to deliver visible results.
Element Composition
| Element | Role | Properties Used |
|---|---|---|
| Heading | Section title | Tag (H1-H6), Font Size, Weight, Color |
| Paragraph | Body content | Text, Line Height, Color |
Heading + Paragraph + CTA
Adds a call-to-action button to drive user engagement.
Discover Your Perfect Skincare Ritual
Take our quick skin quiz to find the Ayurvedic products perfectly suited to your unique skin type and concerns.
Centered Text Block
Center-aligned text for hero sections and featured content.
Transform Your Skin Naturally
Experience the power of 100% natural, Ayurvedic skincare. Our formulations are crafted with rare herbs and time-tested recipes to reveal your skin's natural radiance.
Quote Block
Stylized testimonial or inspirational quote with attribution.
"After just two weeks, my skin has never looked better. The Manjish Glow Elixir Face Oil has become an essential part of my evening routine."
Highlight Box
Text block with background emphasis for important information.
Did You Know?
Manjish Glow Elixir Face Oil has been used in Ayurvedic beauty rituals for over 3,000 years. The formula traditionally contains saffron and 16 other precious herbs, each selected for their skin-brightening properties.
Common Properties
All Basic Text components share these configurable properties:
| Property | Type | Description |
|---|---|---|
| Alignment | Select | Left, Center, Right |
| Max Width | Size | Content max width (for readability) |
| Spacing | Spacing | Gap between elements |
| Background | Color | Optional background for highlight variants |
Usage Guidelines
Do
- Use for page introductions and section headers
- Keep paragraphs concise and scannable
- Match heading levels to content hierarchy
- Use CTAs with clear action verbs
Don't
- Create walls of text without visual breaks
- Skip heading levels (H2 to H4)
- Use multiple CTAs in one block
- Center-align long paragraphs
Related Components
- Heading Element - Base heading building block
- Paragraph Element - Base text building block
- Image + Text - Text with visual content