Layout Preview 04

Viewport / Rail splits the full-screen background and the centered rail into two layers.

The clearest feature of this pattern is not cards or a sidebar. Each section carries a complete full-bleed background band, and the content simply sits on the axis inside it.

Core Rule

The band cuts the sections; the rail carries the content.

If you want a stronger sense of chapter change, this works better than Rail Flow.

Viewport Layer

Full-screen color, sectional atmosphere, and chapter transitions happen at this layer.

Rail Layer

Body copy, explanations, parameters, and lists still return to the centered rail.

Why Use It

Use it for opening sections, closing sections, mid-page transitions, or disclaimers.

Band Section

This whole block belongs to one full-bleed band.

You can place a section title, summary, explanation, and one or two guidance modules here, but its structural force comes from the full background band rather than small local cards.

Rail Summary

The right side is still only supporting information within the same band.

It does not need to stay fixed like Primary / Secondary.

Not Rail Flow

The point is not continuous reading rhythm, but chapter contrast.

Not Card Matrix

The point is not lots of cards either, but the fact that this section changed.

Best Use

Homepage bands, chapter contents, summary zones, and disclosure zones.