1 800 123 45 67 Source theme: telco/telco.html

Generator Recipes

Pattern-to-Section Recipes

Reference flows that map each universal pattern to a default section sequence.

centered-stack

Use when message hierarchy is single-thread and conversion is direct.

  1. Announcement / Utility Bar
  2. Primary Header / Navigation
  3. Intro / Overview Section
  4. Call To Action Band
  5. Footer

two-column-split

Use when explanatory text must pair with supporting media.

  1. Announcement / Utility Bar
  2. Primary Header / Navigation
  3. Feature Split
  4. Benefits / Value Section
  5. Lead Capture Section
  6. Footer

feature-grid

Use for catalog-like and repeatable content.

  1. Announcement / Utility Bar
  2. Primary Header / Navigation
  3. Intro / Overview Section
  4. Feature Grid
  5. Blog / Content Feed
  6. Footer

media-grid

Use for visual-first pages and portfolios.

  1. Announcement / Utility Bar
  2. Primary Header / Navigation
  3. Case Studies / Portfolio
  4. Media / Gallery Section
  5. Footer

hero-overlay

Use for campaign and landing surfaces.

  1. Announcement / Utility Bar
  2. Primary Header / Navigation
  3. Hero Section
  4. Logo / Trust Bar
  5. Call To Action Band
  6. Footer

card-row

Use for pricing and social-proof groupings.

  1. Announcement / Utility Bar
  2. Primary Header / Navigation
  3. Pricing
  4. Testimonials
  5. Call To Action Band
  6. Footer

alternating-split

Use for narrative product walkthroughs.

  1. Announcement / Utility Bar
  2. Primary Header / Navigation
  3. Feature Split
  4. Product / Service Detail
  5. Benefits / Value Section
  6. Footer

list-layout

Use for support and policy-oriented pages.

  1. Announcement / Utility Bar
  2. Primary Header / Navigation
  3. FAQ Section
  4. Download / Resource Section
  5. Footer

sidebar-layout

Use when content and contextual navigation co-exist.

  1. Announcement / Utility Bar
  2. Primary Header / Navigation
  3. Blog / Content Feed
  4. FAQ Section
  5. Footer

full-width-band

Use for high contrast messaging strips and highlights.

  1. Announcement / Utility Bar
  2. Stats / Metrics
  3. Call To Action Band
  4. Footer

step-timeline

Use for sequence and historical narratives.

  1. Announcement / Utility Bar
  2. Primary Header / Navigation
  3. Process / How It Works
  4. Timeline / Story
  5. Footer

dashboard-data

Use for app and operational data surfaces.

  1. Announcement / Utility Bar
  2. Primary Header / Navigation
  3. Stats / Metrics
  4. Comparison Section
  5. Location / Contact Section
  6. Footer