Centered With Browser Mockup
A centered hero with headline and CTAs above a browser mockup with sidebar, chart, and table rows.
A centered hero with headline and CTAs above a browser mockup with sidebar, chart, and table rows.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
Centered With Browser Mockup is a centered hero with a product window under the copy. A headline, lede, and two CTAs sit above a browser mockup complete with traffic light dots, a URL pill, a sidebar navigation skeleton, a bar chart, and three table rows. Everything in the window is rounded divs and theme tokens, no screenshot, so the mockup never goes out of date and inverts cleanly in dark mode. The hero fills the viewport and ships without its own header.
The chart heights are a plain array, the sidebar rows and table rows are mapped from small data arrays, and the URL pill is one string, so the window can suggest any product without redrawing anything. The sidebar hides below the small breakpoint, which keeps the fold clean on phones. Headline, lede, and button labels are independent copy strings.
Reach for this block when you want the hero to say this is a real product without committing to a real screenshot. It reads more like an app than with-kanban-preview, which suggests one specific workflow, and it carries more visual weight than centered-minimal. If your pitch leans on numbers rather than interface, split-with-analytics-dashboard or split-with-metrics make the stronger opening.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is a general workspace pitch where the product is the hero. Other ways to dress the window:
Tip: resist adding more panels to the window, two content blocks under a chrome bar read as real while five read as a brochure.