Split With Code
A split hero with headline, lede, and CTAs beside a token colored code editor window mockup.
A split hero with headline, lede, and CTAs beside a token colored code editor window mockup.
The Marketing Pro Collection unlocks the source for every Marketing Pro block. All Access unlocks every Collection.
Already purchased? Log in
Split With Code divides the viewport into two equal columns. The left column holds a large heading, a one or two sentence lede, and a pair of side by side call to action buttons. The right column is an SVG free code editor window built entirely from markup: three chrome dots, a filename tab, line numbers, and token colored spans that pick up your theme colors automatically, so it reads correctly in both light and dark mode.
The heading, lede, and button labels are plain text you can replace in place. The code lines in the editor window are a static array of tokens, so you can swap the snippet for any short example that fits your product without touching the layout. The whole right panel can be removed if you need a simpler left aligned hero.
Reach for this block when the first thing a visitor needs to see is that your product has a real API. It is a strong fit for a developer tool, an AI assistant, or any platform where the integration story is the primary selling point. Compared to a centered hero with feature pills, this layout leads with a concrete code sample rather than a list of benefits, which lands better with a technical audience who wants to see the call before reading the pitch.
A natural flow around it on a Marketing Pro page:
Before
After
The two columns are independent, so you can tune each side without affecting the other:
Tip: the filename tab above the snippet is a small but effective detail. Set it to a real filename from your SDK (like
track.tsorclient.py) to make the window feel authentic rather than decorative.