Hero & Module Patterns

The mandatory HTML structures for hero sections and content modules — from L0 to L3

On this page

01L0 Hero Pattern 02L1–L3 Hero Pattern 03Module Pattern (all levels) 04Common Mistakes

01

L0 Hero Pattern

The L0 page (landing page) has a special hero pattern: centered title, subtitle on rgba(255,255,255,.85), a badge, and — when multiple audiences exist — an audience switch.

<!-- L0 Hero: Landing Page -->
<section class="module module-hero" id="hero">
  <div class="module-content"
       style="text-align:center">

    <!-- Badge -->
    <span class="hero-badge">
      🔧 Developer
    </span>

    <!-- Title: White on dark gradient -->
    <h1 style="color:#FFFFFF;
         font-family:var(--font-display);
         font-size:var(--text-5xl);
         font-weight:800">
      Course Title
    </h1>

    <!-- Subtitle: NOT #FFFFFF -->
    <p style="color:rgba(255,255,255,.85);
        font-size:var(--text-xl)">
      Course description ...
    </p>

    <!-- Audience Switch (only with >1 audience) -->
    <div class="audience-switch">
      <a href="index_dev_en.html"
         class="active">🔧 Developer</a>
      <a href="index_mgr_en.html">
        📊 Manager</a>
    </div>

  </div>
</section>

L0 Hero Components:

Badge — Shows emoji + audience name. On the gradient background with slight transparent background.

Title (h1) — White (#FFFFFF) on the dark gradient. font-weight: 800, font-size: --text-5xl.

Subtitle — rgba(255,255,255,.85) — slightly transparent, NOT pure white. Creates visual hierarchy.

Audience Switch — Only present when multiple audiences were generated. Links to other L0 pages.

No page-overview! L0 has NO page overview because the cards on the L0 page already serve as navigation.

Important: The L0 page has no level dots and no back button. It is the entry point — there is nothing to navigate back to.

02

L1–L3 Hero Pattern

From L1 onwards, all pages use the same hero pattern with level dots, back button, title, and PAGE-OVERVIEW (mandatory!). The page overview lists all sections with anchor links.

<!-- L1-L3 Hero: With Level Dots + Page Overview -->
<section class="module module-hero" id="hero">
  <div class="module-content"
       style="text-align:center">

    <!-- Level Dots: done/done/active/empty -->
    <div class="level-indicator">
      <span class="level-dot level-dot-done"></span>
      <span class="level-dot level-dot-done"></span>
      <span class="level-dot level-dot-active"></span>
      <span class="level-dot"></span>
    </div>

    <!-- Back Button -->
    <a href="../l1/parent.html"
       class="back-button">
      &larr; Back to ...
    </a>

    <!-- Title -->
    <h1 style="color:#FFFFFF; ...">
      Page Title
    </h1>
    <p style="color:rgba(255,255,255,.85); ...">
      Description
    </p>

    <!-- PAGE-OVERVIEW: MANDATORY from L1! -->
    <div class="page-overview">
      <div class="page-overview-title">
        On this page
      </div>
      <div class="page-overview-items">
        <a href="#section-1"
           class="page-overview-item">
          <span class="page-overview-num">01</span>
          <span class="page-overview-text">
            Section Title
          </span>
        </a>
        <!-- ... more items -->
      </div>
    </div>

  </div>
</section>

L1–L3 Hero Components:

Level Dots — 4 dots for L0–L3. Completed levels: orange (.level-dot-done). Current level: dark blue (.level-dot-active). Future: empty.

Back Button — Links to the parent page. L1 links to L0, L2 links to L1, L3 links to L2. Always relative path.

Title + Subtitle — Same rules as L0: white title, rgba subtitle.

PAGE-OVERVIEW (MANDATORY!) — Lists all sections with numbers and anchor links. Without page overview, users cannot see what is on the page. Most common mistake: hero without page overview.

Level dot logic for L2: L0 = done (orange), L1 = done (orange), L2 = active (dark blue, slightly larger), L3 = empty (border only). The dot classes are: level-dot-done, level-dot-active, and no class for empty.

03

Module Pattern (all levels)

Every content section is a module with a fixed nesting structure: .module → .module-content → Header + Body → Screens.

<!-- Module Pattern: Every content section -->
<section class="module"
         id="section-1"
         style="background:var(--color-bg-warm)">
  <!--   min-height: 100dvh (via CSS)
       scroll-snap-align: start
       Alternating BGs: warm / white / warm / white -->

  <div class="module-content">
    <!-- max-width: 820px, centered -->

    <header class="module-header animate-in">
      <!-- Module number: Large, transparent -->
      <span class="module-number">01</span>
      <!-- font-size: 3.75rem, opacity: .15 -->

      <h2 class="module-title">
        Section Title
      </h2>
    </header>

    <div class="module-body">
      <!-- flex-direction: column, gap: 2rem -->

      <section class="screen animate-in">
        <!-- First content block -->
        <p>Introduction text ...</p>
      </section>

      <section class="screen animate-in">
        <!-- Visualization, cards, etc. -->
      </section>

    </div>
  </div>
</section>

<!-- Next module: DIFFERENT background -->
<section class="module"
         id="section-2"
         style="background:var(--color-bg)">
  <!-- ... -->
</section>

Module Nesting:

.module — Outer container. min-height: 100dvh. scroll-snap-align: start. Background alternates: --color-bg-warm / --color-bg.

.module-content — Inner container. max-width: 820px. margin: 0 auto. Keeps content centered.

.module-header — Contains .module-number (01, 02 ...) and .module-title (h2). The number is huge and nearly transparent (opacity: .15).

.module-body — Flexbox column with gap. Contains the .screen elements.

.screen — Individual content blocks within a module. Each screen has animate-in for scroll animation.

Alternating backgrounds: Module 1 = --color-bg-warm (#F3EFEB), Module 2 = --color-bg (#FFFFFF), Module 3 = warm, Module 4 = white ... This pattern MUST be followed.

04

Common Mistakes

The five most common mistakes when implementing module patterns — with concrete wrong vs. right comparisons.

Mistake 1: Naked Section Without Module Wrapper

WRONG

<!-- Missing: .module, .module-content,
     .module-header, .module-number -->
<section id="topic">
  <h2>Topic</h2>
  <p>Content ...</p>
</section>

RIGHT

<section class="module" id="section-1"
  style="background:var(--color-bg-warm)">
  <div class="module-content">
    <header class="module-header animate-in">
      <span class="module-number">01</span>
      <h2 class="module-title">Topic</h2>
    </header>
    <div class="module-body">
      <section class="screen animate-in">
        <p>Content ...</p>
      </section>
    </div>
  </div>
</section>

Mistake 2: Hero Without Page Overview

WRONG

<section class="module module-hero">
  <div class="module-content">
    <h1>Title</h1>
    <p>Description</p>
    <!-- NO page-overview! -->
  </div>
</section>

RIGHT

<section class="module module-hero">
  <div class="module-content">
    <h1>Title</h1>
    <p>Description</p>
    <div class="page-overview">
      <div class="page-overview-title">
        On this page</div>
      <div class="page-overview-items">
        <!-- Anchor links -->
      </div>
    </div>
  </div>
</section>

❌

Missing min-height

Modules without min-height: 100dvh break scroll-snap behavior. Every module MUST fill the full viewport height.

❌

No Alternation

All modules with the same background. Missing visual separation between sections. Must be warm/white/warm/white.

❌

Wrong CSS Classes

Custom classes instead of defined ones: .content-section instead of .module. The foundation only knows predefined classes.

✏️ Quick Check

What is wrong with this code?
<section id="topic"><h2>Topic</h2>...</section>

The section needs a style attribute for the background

The h2 element needs a special class

Missing .module wrapper, .module-number, .module-content — naked section

The ID must start with "section-"