Split Content Shell

About this block

Split Content Shell is a full-page working layout with no sidebar. A slim top bar holds the Acme brand mark, the active document title Onboarding email sequence, a Saved badge, and a row of ghost actions leading to a Publish button and the signed-in avatar. Below it the content area divides 50/50: an Editor pane on the left labeled Markdown and a Preview pane on the right labeled Rendered, each containing a dashed slot for the actual editing surface.

The split is one horizontal flex container. The Preview pane hides below lg so narrow viewports get a full-width editor without layout shift.

When to use

Reach for this block wherever users author content and want a live preview beside the input, email editors, template builders, markdown documents, or code-and-output panels, replacing the dashed zones with the real editor and renderer.

A natural flow around it on an Application Pro page:

Before

• Nothing, shells are the page

After

• Filters and search
• Forms

What you can display

One strong use is the email sequence editor. Other split content layouts:

• Policy editor. Markdown source left, rendered terms right, with a Publish to team button.
• Code sandbox. Editor pane with syntax highlight, output or console pane on the right.
• Template builder. Variable form on the left, rendered preview refreshing on the right.

Tip: name the pane labels explicitly, Editor and Preview, so users always know which side controls the other.