App Workspace

About this block

App Workspace opens with a single oversized display word and a short supporting line bottom aligned to its right, then drops into a two-column row. The left column is a narrow rail: a bold stat statement at the top, with its brand name set in muted ink, and a mono uppercase feature index pinned to the bottom. The right column holds a full product dashboard mockup, an automation workspace with a top bar, a sidebar, an assistant prompt, and a row of "start from scratch" cards.

The mockup is plain markup built from theme tokens in the same language as the collection's Product Showcase block, so it carries no external dependencies and adapts to light and dark themes automatically. The grid stretches both columns to a shared height, so the rail fills the mockup's height with real content rather than floating in whitespace.

When to use

Reach for this block as the lead feature moment on a Modern SaaS page, just under the hero, when the product is the dashboard itself and you want to show it at full size while a short rail carries the headline stat and the capabilities that matter most. The oversized word gives the section a single clear focal point while the mockup does the explaining. It suits automation platforms, internal tool builders, and anything where a person needs to picture the workspace before they read about it.

A natural flow around it on a Modern SaaS page:

Before

• A hero section to introduce the product before the dashboard comes into view
• A logo cloud to establish trust ahead of the capability breakdown

After

• Bento Grid to follow the dashboard with a denser overview of the remaining capabilities
• A testimonials section to reinforce the workspace with real user reactions

What you can customize

• Display word and lede. Swap the single word and the supporting line; keep the word short so it reads as one bold focal mark rather than a wrapped phrase.
• Stat and feature index. Rewrite the stat statement and the four mono labels in the rail. Keep the labels short and roughly even in length so the index stays clean.
• Dashboard mockup. The window, sidebar, assistant prompt, and the row of "start from scratch" cards are plain markup arrays. Edit the primaryNav, secondaryNav, and scratch lists, keeping the currentColor and text-* token classes so the mockup inherits the theme.

Tip: the rail reads best when its bottom edge lines up with the mockup, so add or trim feature rows to match the dashboard's height rather than padding the column.