Split With Code

About this block

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.

When to use

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

• A top navigation or site header (plain text, no block needed at this position)

After

• A Features section to expand on what the SDK can do after the hero sets the hook
• A How It Works section to walk through the setup steps implied by the code snippet

What you can customize

The two columns are independent, so you can tune each side without affecting the other:

• Left copy. Swap the heading, lede, and button labels to match your product name, value proposition, and primary conversion action.
• Code snippet. Replace the token array with any short snippet that shows your SDK or API in action. Keep it to eight or nine lines so the window fits the column height without scrolling.
• Right panel. Swap the code window for a screenshot, diagram, or other visual if a live code sample is not the right proof point for your audience.

Tip: the filename tab above the snippet is a small but effective detail. Set it to a real filename from your SDK (like track.ts or client.py) to make the window feel authentic rather than decorative.