A Content State Navigation Framework

Overview
Learn the framework.

Editorial
Long-form content layouts.

Commerce
Catalog and pricing layouts.

Components
Reusable interface components.

Live Contents

MSlide2
Overview

A Content State Navigation Framework

Slide for more


Content State Navigation

MSlide3 organizes content into focused states that users move through progressively. Instead of showing a full page of competing sections, each state gives attention to one message, product, action, or idea.

This makes the experience more controlled and easier to guide, especially when the user arrives from a campaign link, social post, QR code, or product entry point.

ℹ Explore how Content State Navigation structures guided journeys.


Fragment Progression

MSlide3 extends fragments beyond small reveal effects. A fragment can introduce a complete layout stage, product detail, tabbed view, scrollable region, or deeper content layer while keeping the user inside the same content state.

This allows information to unfold progressively without sending users to another page or breaking the current journey.

ℹ Explore how layouts evolve through Fragment Progression.


Guided Distribution

MSlide3 experiences are designed to continue the momentum created by another channel. A visitor can enter from a QR code, social post, campaign link, search result, or direct URL and still remain connected to the larger journey.

This makes MSlide3 useful for guided journeys, social landing pages, product storytelling, QR experiences, and mobile-first campaigns.

ℹ Learn how Content State Navigation structures guided journeys.

Editorial > Hero Section Fragment

Title 1

Curabitur accumsan
turpis pharetra augue
tincidunt blandit.

Editorial > Tabbed Fragment

Title 4

Subtitle

Curabitur accumsan
turpis pharetra augue
tincidunt blandit.

Slide for more

Hello World

Lorem ipsum[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subscript works as well!

Second level

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
  • Ut non enim metus.

Third level

Quisque ante lacus, malesuada ac auctor vitae, congue non ante. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.

  1. Donec blandit a lorem id convallis.
  2. Cras gravida arcu at diam gravida gravida.
  3. Integer in volutpat libero.
  4. Donec a diam tellus.
  5. Aenean nec tortor orci.
  6. Quisque aliquam cursus urna, non bibendum massa viverra eget.
  7. Vivamus maximus ultricies pulvinar.

Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et justo sodales elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.

Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.



Editorial > Section Hero

Title

Subtitle

Curabitur accumsan
turpis pharetra augue
tincidunt blandit.

Editorial > Feature Split

Title

Curabitur accumsan
turpis pharetra augue
tincidunt blandit.

Title

Curabitur accumsan
turpis pharetra augue
tincidunt blandit.

Commerce > Product Hero Fragment

Title 2

Curabitur accumsan
turpis pharetra augue
tincidunt blandit.

Large €0000
Commerce > Product Tabbed Detail Fragment

Title 4

Subtitle

Curabitur accumsan
turpis pharetra augue
tincidunt blandit.

Large €0000
Slide for more

Hello World

Lorem ipsum[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subscript works as well!

Second level

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
  • Ut non enim metus.

Third level

Quisque ante lacus, malesuada ac auctor vitae, congue non ante. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.

  1. Donec blandit a lorem id convallis.
  2. Cras gravida arcu at diam gravida gravida.
  3. Integer in volutpat libero.
  4. Donec a diam tellus.
  5. Aenean nec tortor orci.
  6. Quisque aliquam cursus urna, non bibendum massa viverra eget.
  7. Vivamus maximus ultricies pulvinar.

Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et justo sodales elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.

Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.



Commerce > Single Product Hero

Title

Subtitle

Curabitur accumsan
turpis pharetra augue
tincidunt blandit.

Large €0000
Commerce > Product Scroll Layout

Title

Curabitur accumsan turpis pharetra augue tincidunt blandit.

Medium €0000
Slide for more

Hello World

Lorem ipsum[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subscript works as well!

Second level

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
  • Ut non enim metus.

Third level

Quisque ante lacus, malesuada ac auctor vitae, congue non ante. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.

  1. Donec blandit a lorem id convallis.
  2. Cras gravida arcu at diam gravida gravida.
  3. Integer in volutpat libero.
  4. Donec a diam tellus.
  5. Aenean nec tortor orci.
  6. Quisque aliquam cursus urna, non bibendum massa viverra eget.
  7. Vivamus maximus ultricies pulvinar.

Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et justo sodales elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.

Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.

Components

Colors

UI elements are styled
using Bulma's functional
color system for a clean
and cohesive aesthetic.

Primary

#485fe7

Components

Colors

UI elements are styled
using Bulma's functional
color system for a clean
and cohesive aesthetic.

Success

#23d160

Components

Colors

UI elements are styled
using Bulma's functional
color system for a clean
and cohesive aesthetic.

Info

#3e8ed0

Components

Colors

UI elements are styled
using Bulma's functional
color system for a clean
and cohesive aesthetic.

Danger

#ff3860

Components

Colors

UI elements are styled
using Bulma's functional
color system for a clean
and cohesive aesthetic.

Warning

#ffdd57

Components

Colors

UI elements are styled
using Bulma's functional
color system for a clean
and cohesive aesthetic.

Link

#485fe7

Components

Colors

UI elements are styled
using Bulma's functional
color system for a clean
and cohesive aesthetic.

Dark

#363636

Components

Tipography

Text elements leverage Bulma's
typographic framework, ensuring
a clear hierarchy.

Jumbo

Heading 1

Components

Tipography

Text elements leverage Bulma's
typographic framework, ensuring
a clear hierarchy.

Heading 2

Heading 3

Heading 4

Components

Tipography

Text elements leverage Bulma's
typographic framework, ensuring
a clear hierarchy.

Heading 5
Heading 6

This is a paragraph element
used for text paragraphs.

Components

CTA buttons

Call-to-action elements
are styled with Bulma's
button system.

Jumbo
Components

CTA buttons

Call-to-action elements
are styled with Bulma's
button system.

Large
Medium
Text
Components

CTA buttons

Call-to-action elements
are styled with Bulma's
button system.

Normal
Small
Tiny
Components

Price Tags

Price containers based
on the foundational
Bulma button styles.

Jumbo €0000
Large €0000
Components

Price Tags

Price containers based
on the foundational
Bulma button styles.

Medium €0000
Normal €0000
Components

Price Tags

Price containers based
on the foundational
Bulma button styles.

Small €0000
Tiny €0000