Page Components

Page components are top-level components that compose organisms and molecules to create complete page layouts. They represent the final composition level in the atomic design hierarchy.

What are Page Components?

Page components are:

• Complete layouts: Represent full page structures
• Content-driven: Fill templates with real content
• Route-specific: Often tied to specific routes or page types
• Composition: Combine multiple organisms and molecules

Examples

• A blog post page (header organism + blog content organism + sidebar organism + footer organism)
• A landing page (hero organism + features list organism + testimonials organism)
• A product page (product details organism + related products organism)

Components

• Author - Author page with bio and content list
• Blog - Blog post with content, sidebar, taxonomies
• Guide - Guide with chapter navigation, content, sidebar
• Kickstart - Kickstart project with resources, TOC, content actions
• LiveStream - Live stream with YouTube video, participants, taxonomies
• Page - Generic page that renders CMS components
• Preview - Contentstack Live Preview mode
• Search - Search with faceted filters (content type, subjects, technology, person)

Design Principles

• Composition: Combine organisms to create complete pages
• Content integration: Integrate with CMS and data sources
• Route handling: Often correspond to specific routes
• Complete experience: Provide the full user experience for a page

When to Create a Page Component

Create a page component when:

• You're creating a complete page layout
• The component corresponds to a specific route
• You're combining multiple organisms into a page
• The component handles page-level concerns (SEO, metadata, etc.)

Relationship to Organisms

Page components:

• Compose organisms: Use organisms like Header, Footer, Hero, List
• Use molecules: May use molecules for page-specific elements
• Handle data: Integrate with data sources and CMS
• Provide structure: Define the overall page layout

Examples of Composition

• Author = Breadcrumb + MediaItem + Title + RichTextRenderer + List
• Blog = Breadcrumb + Title + Persons + ContentTaxonomies + RichTextRenderer + Sidebar + TableOfContents + ContentActions + NoticesSection + AdditionalItemsSection
• Guide = Breadcrumb + Title + Persons + ContentTaxonomies + ChapterNavigation + RichTextRenderer + Sidebar + TableOfContents + ContentActions + NoticesSection + AdditionalItemsSection
• Kickstart = Breadcrumb + MediaItem + Title + ContentTaxonomies + ContentActions + RichTextRenderer + KickstarterLinks + TableOfContents + NoticesSection + AdditionalItemsSection
• LiveStream = Breadcrumb + YouTubeVideo + Persons + ContentTaxonomies + RichTextRenderer + NoticesSection + AdditionalItemsSection
• Page = ComponentsRenderer (Hero, List, RichText, Media)
• Search = Title + Button + SearchSidebar + Sidebar + List + Pagination

Page Structure

Pages typically follow this structure:

1. Header - Site navigation and branding
2. Main content - Page-specific organisms and content
3. Sidebar (optional) - Additional navigation or metadata
4. Footer - Site footer with links and information