Page Designer - Content Pages Documentation

Version: 2.0
Last Updated: March 13, 2026
Scope: Content page design, website building, static pages, landing pages

Overview

The Content Designer enables creation of beautiful, responsive content pages and websites with:

40+ display components for rich content presentation
10+ pre-built sections for quick website creation
Responsive design with mobile-first approach
SEO optimization support
CSS animations and interactive elements
No data binding required (static content)

Page Mode: "page"

All content page configurations must set pageMode: "page" in the root configuration.

interface ContentPage {
  id: string;
  name: string;
  pageMode: 'page';
  components: ContentComponent[];
  settings?: PageSettings;
  seo?: SEOSettings;
}

interface PageSettings {
  layout: 'fullWidth' | 'boxed' | 'sidebar';
  backgroundColor?: string;
  textColor?: string;
  fontFamily?: string;
  responsive: boolean;
}

interface SEOSettings {
  title?: string;
  description?: string;
  keywords?: string[];
  ogImage?: string;
  canonical?: string;
}

Text & Typography Components

1. Heading

Type: 'heading'
Purpose: Page and section titles
When to Use: Section headers, titles, main headings
Parameters:
  - level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
  - text: string | "Main Heading"
  - align: 'left' | 'center' | 'right'
  - color: string | "#333333" (hex or color name)
  - fontSize?: string | "2.5rem"
  - fontWeight?: 'normal' | 'bold' | 'lighter' | 300-900
  - margin?: string | "20px 0"
  - subheading?: string | "Optional subheading"

Example:
  {
    id: 'mainHeading',
    type: 'heading',
    level: 'h1',
    text: 'Welcome to Our Platform',
    align: 'center',
    color: '#1976D2',
    fontSize: '3rem',
    fontWeight: 'bold',
    subheading: 'Build amazing experiences'
  }

2. Paragraph

Type: 'paragraph'
Purpose: Body text content
When to Use: Descriptions, articles, body content
Parameters:
  - text: string | "Content text"
  - align: 'left' | 'center' | 'right' | 'justify'
  - color: string | text color
  - fontSize?: string | "1rem"
  - lineHeight?: string | "1.6"
  - maxWidth?: string | "800px"
  - margin?: string | "15px 0"

Example:
  {
    id: 'description',
    type: 'paragraph',
    text: 'Our platform provides excellent tools for building web applications...',
    align: 'left',
    color: '#555555',
    fontSize: '1.1rem',
    lineHeight: '1.8'
  }

3. Text Block (Rich Text)

Type: 'text-content'
Purpose: Rich text content with HTML/Markdown support
When to Use: Articles, rich descriptions, formatted text
Parameters:
  - content: string | HTML/Markdown content
  - format: 'html' | 'markdown'
  - allowHtml: boolean | false
  - className?: string | CSS class
  - maxWidth?: string | "900px"

Example:
  {
    id: 'richContent',
    type: 'text-content',
    format: 'markdown',
    content: `## Section Title\n\nThis is **bold** and *italic* text.\n\n- List item 1\n- List item 2`
  }

4. Blockquote

Type: 'blockquote'
Purpose: Quote or highlighted text
When to Use: Testimonials, quotes, emphasis
Parameters:
  - text: string | "Quote text"
  - author?: string | "Author Name"
  - cite?: string | "Source URL"
  - align: 'left' | 'center' | 'right'
  - fontStyle: 'normal' | 'italic'
  - borderColor?: string | "#1976D2"

Example:
  {
    id: 'testimonialQuote',
    type: 'blockquote',
    text: 'This platform changed how we build applications.',
    author: 'John Doe',
    cite: 'CEO, TechCorp',
    align: 'center',
    fontStyle: 'italic',
    borderColor: '#4CAF50'
  }

5. Code Block

Type: 'code-block'
Purpose: Code snippet display with syntax highlighting
When to Use: Code examples, technical documentation
Parameters:
  - language: 'javascript' | 'python' | 'html' | 'css' | 'sql' | etc.
  - code: string | code content
  - showLineNumbers: boolean | true
  - highlightLines?: number[] | [2, 5] (lines to highlight)
  - copyButton: boolean | true

Example:
  {
    id: 'codeExample',
    type: 'code-block',
    language: 'javascript',
    code: `const handler = (data) => {\n  console.log(data);\n};`,
    showLineNumbers: true,
    copyButton: true
  }

Media Components

6. Image

Type: 'image'
Purpose: Display images
When to Use: Photos, illustrations, icons, diagrams
Parameters:
  - src: string | image URL
  - alt: string | alt text for accessibility
  - caption?: string | image caption
  - width?: string | "100%" or "400px"
  - height?: string | auto or specific height
  - objectFit: 'contain' | 'cover' | 'fill' | 'scale-down'
  - align: 'left' | 'center' | 'right'
  - border?: boolean | false
  - borderRadius?: string | "8px"
  - shadow?: boolean | false
  - lazy: boolean | true (lazy load)
  - link?: string | clickable link URL

Example:
  {
    id: 'heroImage',
    type: 'image',
    src: 'https://example.com/hero.jpg',
    alt: 'Hero image',
    width: '100%',
    height: '400px',
    objectFit: 'cover',
    align: 'center',
    borderRadius: '12px',
    shadow: true,
    lazy: true
  }

7. Video

Type: 'video'
Purpose: Embed and play video content
When to Use: Tutorial videos, demos, promotions
Parameters:
  - src: string | video URL
  - provider: 'youtube' | 'vimeo' | 'html5' | 'custom'
  - width?: string | "100%" or "600px"
  - height?: string | "400px" or auto
  - autoplay: boolean | false
  - controls: boolean | true
  - loop: boolean | false
  - muted: boolean | false
  - poster?: string | thumbnail image URL
  - align: 'left' | 'center' | 'right'
  - maxWidth?: string | "800px"

Example: YouTube Video
  {
    id: 'tutorialVideo',
    type: 'video',
    provider: 'youtube',
    src: 'https://youtube.com/embed/dQw4w9WgXcQ',
    width: '100%',
    height: '500px',
    maxWidth: '800px',
    controls: true,
    align: 'center'
  }

Example: HTML5 Video
  {
    id: 'productVideo',
    type: 'video',
    provider: 'html5',
    src: 'https://example.com/video.mp4',
    width: '100%',
    height: '400px',
    poster: 'https://example.com/poster.jpg',
    controls: true,
    autoplay: false
  }

8. Carousel

Type: 'carousel'
Purpose: Image/content slider
When to Use: Image galleries, testimonial rotation, showcases
Parameters:
  - items: CarouselItem[] | array of images/components
  - autoplay: boolean | true
  - autoplayInterval: number | 5000 (milliseconds)
  - showDots: boolean | true (pagination indicators)
  - showArrows: boolean | true (navigation arrows)
  - height?: string | "400px"
  - aspectRatio?: string | "16:9"

Example:
  {
    id: 'featuredCarousel',
    type: 'carousel',
    height: '400px',
    autoplay: true,
    autoplayInterval: 5000,
    showDots: true,
    showArrows: true,
    items: [
      {
        id: 'item1',
        type: 'image',
        src: 'https://example.com/img1.jpg'
      },
      {
        id: 'item2',
        type: 'image',
        src: 'https://example.com/img2.jpg'
      },
      {
        id: 'item3',
        type: 'image',
        src: 'https://example.com/img3.jpg'
      }
    ]
  }

9. Gallery

Type: 'gallery'
Purpose: Image grid gallery with lightbox
When to Use: Portfolio display, image collections
Parameters:
  - items: { src, alt, caption }[] | array of images
  - columns: number | 3 (grid columns)
  - spacing: string | "15px"
  - aspectRatio: string | "1:1" or "16:9"
  - showCaptions: boolean | true
  - lightbox: boolean | true (zoom on click)
  - lazy: boolean | true

Example:
  {
    id: 'portfolioGallery',
    type: 'gallery',
    columns: 3,
    spacing: '20px',
    aspectRatio: '1:1',
    showCaptions: true,
    lightbox: true,
    items: [
      { src: 'https://example.com/img1.jpg', alt: 'Project 1' },
      { src: 'https://example.com/img2.jpg', alt: 'Project 2' },
      { src: 'https://example.com/img3.jpg', alt: 'Project 3' },
      { src: 'https://example.com/img4.jpg', alt: 'Project 4' }
    ]
  }

Interactive Components

10. Button

Type: 'button-element'
Purpose: Clickable action button
When to Use: Calls to action, navigation, actions
Parameters:
  - label: string | "Click Here"
  - href?: string | link URL
  - variant: 'contained' | 'outlined' | 'text'
  - color: 'primary' | 'secondary' | 'success' | 'error' | 'warning'
  - size: 'small' | 'medium' | 'large'
  - width?: string | default or "100%"
  - align?: 'left' | 'center' | 'right'
  - icon?: string | icon name
  - onClick?: string | custom action
  - target?: '_self' | '_blank' | '_parent'
  - disabled?: boolean | false

Example: CTA Button
  {
    id: 'ctaButton',
    type: 'button-element',
    label: 'Get Started Now',
    href: '/signup',
    variant: 'contained',
    color: 'primary',
    size: 'large',
    align: 'center',
    icon: 'arrow_right'
  }

Example: Secondary Button
  {
    id: 'learnMoreButton',
    type: 'button-element',
    label: 'Learn More',
    href: '/features',
    variant: 'outlined',
    color: 'primary',
    size: 'medium',
    target: '_blank'
  }

11. Link

Type: 'link-element'
Purpose: Hyperlink text
When to Use: In-page links, external links, navigation
Parameters:
  - label: string | "Click here"
  - href: string | URL
  - color?: string | text color
  - underline: 'always' | 'hover' | 'none'
  - target?: '_self' | '_blank'
  - icon?: string | before text

Example:
  {
    id: 'documentLink',
    type: 'link-element',
    label: 'Download PDF',
    href: '/docs/guide.pdf',
    target: '_blank',
    icon: 'download',
    underline: 'hover'
  }

12. Alert

Type: 'alert'
Purpose: Informational message box
When to Use: Warnings, notices, information, errors
Parameters:
  - message: string | alert text
  - severity: 'success' | 'info' | 'warning' | 'error'
  - title?: string | alert title
  - variant: 'standard' | 'filled' | 'outlined'
  - closeable: boolean | true (show close button)
  - icon?: boolean | true (show severity icon)
  - action?: button config | optional action button

Example: Warning Alert
  {
    id: 'warningAlert',
    type: 'alert',
    title: 'Beta Feature',
    message: 'This feature is in beta. Please report issues.',
    severity: 'warning',
    variant: 'outlined',
    closeable: true
  }

Example: Success Alert
  {
    id: 'successMessage',
    type: 'alert',
    message: 'Your changes have been saved successfully.',
    severity: 'success',
    variant: 'filled'
  }

13. Badge

Type: 'badge'
Purpose: Small label/badge
When to Use: Tags, labels, status indicators
Parameters:
  - label: string | "New"
  - color: 'primary' | 'secondary' | 'success' | 'error' | 'warning'
  - variant: 'standard' | 'dot'
  - size: 'small' | 'medium' | 'large'

Example:
  {
    id: 'newBadge',
    type: 'badge',
    label: 'New Feature',
    color: 'success',
    variant: 'standard'
  }

Type: 'breadcrumb'
Purpose: Navigation path indicator
When to Use: Navigation breadcrumbs, page hierarchy
Parameters:
  - items: { label, href }[] | breadcrumb items
  - separator: string | "/" or ">" or custom

Example:
  {
    id: 'pageBreadcrumb',
    type: 'breadcrumb',
    separator: '/',
    items: [
      { label: 'Home', href: '/' },
      { label: 'Products', href: '/products' },
      { label: 'Category', href: '/products/electronics' },
      { label: 'Product Details' }
    ]
  }

Container Components

15. Card

Type: 'content-card'
Purpose: Container with border and shadow
When to Use: Feature highlights, service offerings
Parameters:
  - title?: string | card title
  - image?: string | card image URL
  - content: string | card content
  - icon?: string | card icon
  - link?: string | card link
  - elevation: number | 1-24 (shadow depth)
  - variant: 'outlined' | 'filled'
  - hover?: boolean | true (hover effect)
  - width?: string | "100%"

Example: Feature Card
  {
    id: 'featureCard1',
    type: 'content-card',
    title: 'Fast',
    icon: 'lightning_bolt',
    content: 'Lightning fast performance with optimized rendering.',
    elevation: 2,
    variant: 'outlined',
    hover: true
  }

16. Content Container

Type: 'content'
Purpose: Flexible container for mixed content
When to Use: Group related content
Parameters:
  - maxWidth?: string | "1200px"
  - padding?: string | "20px"
  - margin?: string | "0 auto"
  - backgroundColor?: string
  - components: Component[] | children

Example:
  {
    id: 'contentSection',
    type: 'content',
    maxWidth: '1200px',
    padding: '40px 20px',
    components: [/* child components */]
  }

17. Divider

Type: 'divider-element'
Purpose: Visual separator
When to Use: Section breaks, content separation
Parameters:
  - variant: 'fullWidth' | 'inset'
  - color?: string | divider color
  - thickness?: number | pixels
  - margin?: string | spacing

Example:
  {
    id: 'sectionDivider',
    type: 'divider-element',
    variant: 'fullWidth',
    color: '#E0E0E0',
    margin: '40px 0'
  }

18. Spacer

Type: 'spacer-element'
Purpose: Add vertical or horizontal space
When to Use: Spacing control
Parameters:
  - height?: string | vertical spacing
  - width?: string | horizontal spacing

Example:
  {
    id: 'verticalSpace',
    type: 'spacer-element',
    height: '60px'
  }

Type: 'navigation'
Purpose: Top navigation menu
When to Use: Site header navigation
Parameters:
  - items: NavItem[] | menu items
  - position: 'sticky' | 'relative'
  - backgroundColor?: string
  - textColor?: string
  - logoUrl?: string
  - logoText?: string
  - align: 'left' | 'center' | 'right'

Example:
  {
    id: 'mainNav',
    type: 'navigation',
    position: 'sticky',
    logoText: 'MyApp',
    logoUrl: '/logo.png',
    items: [
      { label: 'Home', href: '/' },
      { label: 'Features', href: '/features' },
      { label: 'Pricing', href: '/pricing' },
      { label: 'Contact', href: '/contact' }
    ]
  }

Type: 'footer'
Purpose: Page footer with links and info
When to Use: Site footer
Parameters:
  - columns: FooterColumn[] | footer sections
  - copyright?: string | copyright text
  - backgroundColor?: string
  - textColor?: string

Example:
  {
    id: 'siteFooter',
    type: 'footer',
    copyright: '© 2024 MyCompany. All rights reserved.',
    backgroundColor: '#333333',
    textColor: '#FFFFFF',
    columns: [
      {
        title: 'Company',
        items: [
          { label: 'About', href: '/about' },
          { label: 'Blog', href: '/blog' },
          { label: 'Careers', href: '/careers' }
        ]
      },
      {
        title: 'Product',
        items: [
          { label: 'Features', href: '/features' },
          { label: 'Pricing', href: '/pricing' },
          { label: 'Security', href: '/security' }
        ]
      },
      {
        title: 'Follow Us',
        items: [
          { label: 'Twitter', href: 'https://twitter.com' },
          { label: 'LinkedIn', href: 'https://linkedin.com' }
        ]
      }
    ]
  }

Type: 'sidebar'
Purpose: Collapsible sidebar navigation
When to Use: Multi-page sites, complex navigation
Parameters:
  - items: NavItem[] | sidebar items
  - width?: string | "250px"
  - position: 'left' | 'right'
  - collapsible: boolean | true
  - backgroundColor?: string

Example:
  {
    id: 'siteNavigation',
    type: 'sidebar',
    position: 'left',
    width: '280px',
    collapsible: true,
    items: [
      { label: 'Dashboard', href: '/dashboard', icon: 'home' },
      { label: 'Settings', href: '/settings', icon: 'settings' }
    ]
  }

Pre-Built Sections (10 Types)

Pre-built, ready-to-customize sections for rapid page creation:

1. Hero Section

Type: 'hero-section'
Purpose: Large banner with headline and CTA
When to Use: Landing page hero, page header

Example:
  {
    id: 'heroSection',
    type: 'hero-section',
    backgroundImage: 'https://example.com/hero.jpg',
    backgroundOverlay: { color: '#000000', opacity: 0.4 },
    title: 'Build Amazing Applications',
    subtitle: 'Fast, secure, and scalable',
    ctaButton: {
      label: 'Get Started',
      href: '/signup'
    },
    height: '600px',
    align: 'center'
  }

2. Features Section

Type: 'features-section'
Purpose: Display product features
When to Use: Feature showcase, selling points

Example:
  {
    id: 'featuresSection',
    type: 'features-section',
    title: 'Why Choose Us',
    subtitle: 'We offer the best features',
    columns: 3,
    features: [
      {
        icon: 'speed',
        title: 'Fast',
        description: 'Lightning fast performance'
      },
      {
        icon: 'security',
        title: 'Secure',
        description: 'Enterprise-grade security'
      },
      {
        icon: 'support',
        title: 'Support',
        description: '24/7 customer support'
      }
    ]
  }

3. Testimonials Section

Type: 'testimonials-section'
Purpose: Customer testimonials display
When to Use: Social proof, customer quotes

Example:
  {
    id: 'testimonialsSection',
    type: 'testimonials-section',
    title: 'What Our Customers Say',
    testimonials: [
      {
        quote: 'Great platform!',
        author: 'Jane Doe',
        title: 'CEO, TechCorp',
        image: 'https://example.com/jane.jpg'
      },
      {
        quote: 'Excellent service',
        author: 'John Smith',
        title: 'Founder, StartupXYZ',
        image: 'https://example.com/john.jpg'
      }
    ]
  }

4. Pricing Section

Type: 'pricing-section'
Purpose: Display pricing plans
When to Use: Pricing page, plan comparison

Example:
  {
    id: 'pricingSection',
    type: 'pricing-section',
    title: 'Simple, Transparent Pricing',
    plans: [
      {
        name: 'Starter',
        price: '$29',
        period: '/month',
        features: ['Feature 1', 'Feature 2'],
        cta: { label: 'Get Started', href: '/signup?plan=starter' }
      },
      {
        name: 'Professional',
        price: '$99',
        period: '/month',
        featured: true,
        features: ['All Starter features', 'Feature 3'],
        cta: { label: 'Get Started', href: '/signup?plan=pro' }
      }
    ]
  }

5. Call To Action (CTA) Section

Type: 'cta-section'
Purpose: Direct call-to-action section
When to Use: Conversion, user engagement

Example:
  {
    id: 'ctaSection',
    type: 'cta-section',
    backgroundColor: '#1976D2',
    textColor: '#FFFFFF',
    title: 'Ready to get started?',
    subtitle: 'Join thousands of satisfied users',
    button: {
      label: 'Start Free Trial',
      href: '/trial',
      color: 'success'
    }
  }

6. Gallery Section

Type: 'gallery-section'
Purpose: Image/portfolio gallery with layout
When to Use: Portfolio showcase, image collection

Example:
  {
    id: 'portfolioSection',
    type: 'gallery-section',
    title: 'Our Work',
    columns: 3,
    items: [
      { src: 'https://example.com/portfolio1.jpg', title: 'Project 1' }
    ]
  }

7. Statistics/Stats Section

Type: 'stats-section'
Purpose: Display key statistics
When to Use: Metrics, achievements, impact

Example:
  {
    id: 'statsSection',
    type: 'stats-section',
    title: 'Our Impact',
    stats: [
      { label: 'Happy Customers', value: '10,000+' },
      { label: 'Projects Delivered', value: '5,000+' },
      { label: 'Team Members', value: '100+' }
    ]
  }

8. Team Section

Type: 'team-section'
Purpose: Display team members
When to Use: Team/about pages

Example:
  {
    id: 'teamSection',
    type: 'team-section',
    title: 'Our Team',
    columns: 4,
    members: [
      {
        name: 'Jane Doe',
        title: 'CEO',
        image: 'https://example.com/jane.jpg',
        social: { twitter: '', linkedin: '' }
      }
    ]
  }

9. FAQ Section

Type: 'faq-section'
Purpose: Frequently Asked Questions
When to Use: Support pages, FAQs

Example:
  {
    id: 'faqSection',
    type: 'faq-section',
    title: 'Frequently Asked Questions',
    faqs: [
      {
        question: 'How do I get started?',
        answer: 'Sign up for a free account...'
      },
      {
        question: 'Is there a free trial?',
        answer: 'Yes, we offer a 14-day free trial...'
      }
    ]
  }

10. Contact Section

Type: 'contact-section'
Purpose: Contact form and information
When to Use: Contact pages

Example:
  {
    id: 'contactSection',
    type: 'contact-section',
    backgroundColor: '#F5F5F5',
    title: 'Get In Touch',
    subtitle: 'We would love to hear from you',
    contactInfo: [
      { type: 'email', value: 'hello@example.com', label: 'Email' },
      { type: 'phone', value: '+1 (555) 123-4567', label: 'Phone' },
      { type: 'address', value: '123 Main St, City, State', label: 'Address' }
    ],
    formFields: [
      { name: 'name', type: 'text', label: 'Your Name' },
      { name: 'email', type: 'email', label: 'Your Email' },
      { name: 'message', type: 'textarea', label: 'Message' }
    ]
  }

Complete Landing Page Example

{
  id: 'landingPage',
  pageMode: 'page',
  name: 'Product Landing Page',
  seo: {
    title: 'Amazing Product - Change Your Life',
    description: 'Discover our revolutionary product',
    keywords: ['product', 'amazing', 'revolutionary']
  },
  components: [
    // Navigation
    {
      id: 'mainNav',
      type: 'navigation',
      position: 'sticky',
      logoText: 'Product',
      items: [
        { label: 'Home', href: '#home' },
        { label: 'Features', href: '#features' },
        { label: 'Pricing', href: '#pricing' },
        { label: 'Contact', href: '#contact' }
      ]
    },
    
    // Hero Section
    {
      id: 'hero',
      type: 'hero-section',
      backgroundImage: 'https://example.com/hero.jpg',
      title: 'Amazing Product',
      subtitle: 'Change Your Life Today',
      ctaButton: { label: 'Get Started', href: '/signup' },
      height: '600px'
    },
    
    // Features Section
    {
      id: 'features',
      type: 'features-section',
      title: 'Features',
      features: [/* feature items */]
    },
    
    // Testimonials
    {
      id: 'testimonials',
      type: 'testimonials-section',
      title: 'What Customers Say',
      testimonials: [/* testimonial items */]
    },
    
    // Pricing
    {
      id: 'pricing',
      type: 'pricing-section',
      title: 'Pricing Plans',
      plans: [/* pricing plans */]
    },
    
    // CTA Section
    {
      id: 'cta',
      type: 'cta-section',
      title: 'Ready?',
      button: { label: 'Start Free Trial', href: '/trial' }
    },
    
    // Footer
    {
      id: 'footer',
      type: 'footer',
      copyright: '© 2024 Product. All rights reserved.'
    }
  ]
}

Responsive Design

Content pages automatically respond to different screen sizes:

{
  // Responsive configuration
  responsive: true,
  breakpoints: {
    mobile: { max: 480 },
    tablet: { min: 481, max: 768 },
    desktop: { min: 769 }
  }
}

Best Practices

Hierarchy: Use proper heading hierarchy (h1 → h6)
Spacing: Use consistent spacing (multiples of 8px or 16px)
Colors: Maintain color consistency with brand colors
Images: Optimize images for web (use modern formats)
Typography: Use web-safe fonts or Google Fonts
Accessibility: Always include alt text for images
Responsive: Test on mobile and tablet sizes
Loading: Use lazy loading for off-screen images
Structure: Use semantic HTML structure
CTAs: Make calls-to-action clear and prominent

Next: See PAGE_DESIGNER_REPORTS.md for Report page types.

Overview​

Page Mode: "page"​

Text & Typography Components​

1. Heading​

2. Paragraph​

3. Text Block (Rich Text)​

4. Blockquote​

5. Code Block​

Media Components​

6. Image​

7. Video​

8. Carousel​

9. Gallery​

Interactive Components​

10. Button​

11. Link​

12. Alert​

13. Badge​

14. Breadcrumb​

Container Components​

15. Card​

16. Content Container​

17. Divider​

18. Spacer​

Navigation Components​

19. Navigation Bar​

20. Footer​

21. Sidebar​

Pre-Built Sections (10 Types)​

1. Hero Section​

2. Features Section​

3. Testimonials Section​

4. Pricing Section​

5. Call To Action (CTA) Section​

6. Gallery Section​

7. Statistics/Stats Section​

8. Team Section​

9. FAQ Section​

10. Contact Section​

Complete Landing Page Example​

Responsive Design​

Best Practices​