Journey Structure

Journey Structure Purpose

MSlide³ organizes content as a guided journey.

Unlike MSlide², which focuses on structured exploration through sections, slides, and visual navigation, MSlide³ focuses on progression through Content States. Shared framework architecture, navigation behavior, and inherited state patterns are covered in the MSlide² Build documentation.

A journey is the main experience path.


Journey

├── Content State

├── Content State

├── Content State

└── Content State


Each Content State represents one focused stage of the experience.

Basic Journey Structure

A basic MSlide³ journey is built from full-height sections.

<!-- Content State 1 -->
<section class="full-height-section" id="intro">

    <!-- State content goes here -->

</section>

<!-- Content State 2 -->
<section class="full-height-section" id="product">

    <!-- State content goes here -->

</section>

<!-- Content State 3 -->
<section class="full-height-section" id="contact">

    <!-- State content goes here -->

</section>

The full-height-section class defines each major Content State.

The id gives the state a semantic destination.

Content State

A Content State is a focused screen within the journey.

<!-- Single Content State -->
<section class="full-height-section" id="product-overview">

    <div class="hero is-fullheight">

        <div class="hero-body">

            <!-- Main state content -->
            <h2>Product Overview</h2>

            <p>
                Focused content for this stage of the journey.
            </p>

        </div>

    </div>

</section>

Relationship To MSlide²

MSlide² structures content for exploration.

MSlide³ structures content for progression.


MSlide²

└── Structured Content Exploration


MSlide³

└── Content State Journey


MSlide² documentation covers the shared foundation. 

Build interactive catalogs, menus, and high-impact landing pages.

MSlide

The Hague, Netherlands

KVK #70530483

mslide@bod.nu

+31 615712746

© 2026 Blastoff / bod.nu