The split hero divides the above-the-fold section into two equal halves: a text-and-CTA column on the left and a visual content column on the right. It is used by developer tools, SaaS products, and CLI applications where showing real code or a product screenshot communicates value more directly than a marketing tagline alone.

The two-column grid

.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh } creates two equal columns that each fill the full viewport height. The dark background (#0f172a) spans both columns. The right panel has a slightly different background (#0a0e1a) and a subtle left border to create visual separation.

The left copy panel

.left uses display: flex; flex-direction: column; justify-content: center; gap: 18px — a vertical flex column centred in the panel with consistent spacing between elements. The headline uses font-size: clamp(24px, 3.5vw, 40px) for fluid scaling without media queries. The brand logo links in .logos are styled with uppercase tracking for a minimal trust signal row.

The terminal window

The right panel contains a .window div that simulates a macOS code editor window — the same chrome as the standalone terminal window snippet. The .bar contains three coloured circles (red #ef4444, yellow #f59e0b, green #22c55e) mimicking macOS traffic light buttons. The code lines inside use  elements with  for purple keywords and  for blue values — a lightweight syntax colouring system without a library.

The code content

The code lines in the terminal show what appears to be a CLI or configuration output. Change them in the HTML panel to show your product's actual syntax — a terminal command, a config file, an API response, or a code snippet. The .line.success class makes a line green for a success output. .line.muted dims non-essential lines.

Making it responsive

Add @media (max-width: 768px) { .split { grid-template-columns: 1fr; } .right { display: none; } } to stack the layout on mobile and hide the code panel, showing only the copy column at full width.

The 1fr 1fr grid

The split-hero uses display: grid; grid-template-columns: 1fr 1fr — two equal columns. On mobile, this collapses to grid-template-columns: 1fr with the right panel moving below the left content. The 1fr unit distributes available space equally after gaps and padding. For an asymmetric split (e.g., 55/45), use grid-template-columns: 55fr 45fr.

The terminal code panel

The right panel uses a dark background (matching a code editor theme) with monospace font and syntax-coloured spans. Keywords use CSS classes: .kw (blue), .str (green), .cm (grey for comments), .fn (yellow). No syntax highlighting library — just CSS classes and static markup. The terminal window chrome uses three coloured dots (red, yellow, green) as a familiar code editor indicator.

Responsive code panel handling

On mobile (under 768px), the code panel either: (a) hides completely — code is decorative and not worth the space on small screens, (b) shows a simplified version with fewer lines, or (c) remains but scrolls horizontally. Option (a) is the cleanest approach for hero sections where the focus should be the headline and CTA.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't need to work out the fluid typography or the syntax-coloring trick by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how the clamp function on the headline's font-size scales without a single media query, or why em and b elements (rather than a syntax-highlighting library) are enough to fake code coloring in the terminal window. The same assistant can help optimize it, for example checking whether the terminal panel should be marked aria-hidden since it's purely decorative, or whether the 1fr 1fr grid needs an explicit mobile breakpoint since none exists in the base snippet. It's also useful for extending the feature: ask it to animate the terminal lines in with a staggered typing effect, swap the static code lines for a live rotating set of example commands, or add a real screenshot image as an alternative to the fake terminal for a non-developer product. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a two-column split hero section with a fake terminal code panel in plain HTML and CSS only, no JavaScript.

Requirements:
- A single CSS grid container with exactly two equal-width columns (grid-template-columns: 1fr 1fr) that both span the full viewport height, with no wrapper divs needed to force equal heights.
- The left column must use flexbox to vertically center a badge, a heading, a paragraph, two call-to-action links (one visually primary, one a plain ghost-style link), and a row of small uppercase trust-signal logos, all with consistent spacing via a single gap value rather than individual margins.
- The headline's font-size must scale fluidly between a minimum and maximum pixel size across viewport width using the CSS clamp function, with no media queries involved in the scaling.
- The right column must render a fake macOS-style code editor window: a header bar with three colored circular dots (red, yellow, green) mimicking traffic-light window controls, and a body of monospace text lines.
- Fake syntax coloring in the terminal lines using only semantic inline elements (for example em for keywords and b for values) styled with color in CSS, not a syntax-highlighting library or classes-per-token system.
- Include at least one line styled as a success message in a distinct green color and one line styled as a muted, de-emphasized line in a dimmer gray, both using simple modifier classes.
- As a documented extension in a CSS comment, show the media query needed to collapse the grid to a single column and hide the terminal panel entirely below a mobile breakpoint.

Step by step

How to Use

1
Load the snippetClick "Split Hero" in the sidebar. The preview shows the dark two-column hero with the copy panel left and the terminal window right.
2
Update the headline and copyIn the HTML panel, replace the h1 text and paragraph with your product headline and subtext. The clamp() font-size scales automatically.
3
Update the badge and CTAsChange the .badge text and the .btn labels. Add href attributes to the buttons to link to your product pages.
4
Update the terminal code linesIn the HTML panel, update the .line elements in the terminal window with your product CLI output, config, or code example.
5
Add mobile responsivenessIn the CSS panel, add @media (max-width: 768px) { .split { grid-template-columns: 1fr; } .right { display: none; } }.
6
Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

Developer tool and CLI landing pages

Show a terminal command and output on the right side to immediately communicate that the product is developer-focused and code-first.

SaaS product pages

Replace the terminal with a product screenshot or the browser mockup from the product hero. The two-column grid keeps the copy readable without competing with the visual.

Portfolio and agency hero sections

Use the left column for credentials and the right for a featured project preview. The dark aesthetic communicates a premium, technical sensibility.

Learn CSS Grid 1fr/1fr layout

Edit the grid-template-columns values in the CSS panel. Change 1fr 1fr to 1fr 2fr or 2fr 1fr to see how fractional units redistribute the column widths.

Prototype two-column landing pages

Use as a wireframe base for any two-column above-the-fold design. Swap out the terminal for a product image, mockup, or feature list.

Progressive enhancement for mobile

Add a media query that hides the right column on mobile and switches the grid to single column. The left panel reads cleanly as a standalone mobile hero.

Got questions?

Frequently Asked Questions

display: grid; grid-template-columns: 1fr 1fr creates two equal-width columns. min-height: 100vh makes both columns fill the viewport height. The two child divs (.left and .right) each sit in one column.

The .window div has a dark background with a border-radius and box-shadow. The .bar inside has three coloured circle spans (red, yellow, green) mimicking macOS traffic light buttons. The code preview uses monospace font with semantic HTML spans for colouring.

Coloured spans use CSS classes: em { color: #a78bfa } for purple keywords and b { color: #60a5fa } for blue values. This is a lightweight inline approach. For a full standalone version, see the code block snippet.

Add @media (max-width: 768px) { .split { grid-template-columns: 1fr; } .right { display: none; } } to the CSS panel. This collapses to a single column on mobile and hides the terminal panel, showing only the copy at full width.

Remove the .window div and replace it with an img element. Add width: 100%; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.4) to match the existing visual style.

Yes. Click "JSX" to download a React component or "Tailwind" for a Tailwind version. In Tailwind, the grid maps to grid grid-cols-2 min-h-screen. Replace the fixed hex colours with your Tailwind theme tokens.

Loading…