Split Hero with Product Panel
Copy on the left, a drawn product panel on the right — the default hero for anything with an interface to show, with no image asset to host and no layout shift while it loads.
All blocksMarketing
Heroes
14 blocks in this category, each rendered live below. Open any of them for the full source and a copy button.
A block is one finished section of a page — a pricing table, a hero, a footer.
Centered Announcement Hero
A linked announcement pill over a large centered headline, dual CTAs and a wordmark strip — the hero for a product with nothing to screenshot yet.
Hero with Browser Frame
Centered copy above a screenshot in window chrome, masked at the bottom so a tall image never dictates the height of the fold. Wraps your own img or video.
Waitlist Hero with Email Capture
A pre-launch hero whose only ask is an email address, with pending and success states and a signup count that argues for finishing rather than starting.
Search-First Hero
A hero whose primary action is a real search form with prefilling suggestion chips — for marketplaces and directories, where sending the visitor below the fold to find the search box is the whole failure.
Developer Hero with Install Command
A drawn terminal whose install line is real, selectable text with a working copy button and a feature-detected clipboard call — the hero for anything adopted by typing rather than signing up.
App Download Hero with Phone
A drawn phone beside two store links built as real anchors rather than badge images, so they inherit the theme, need no hosted asset and carry an accessible name that is not a filename.
Hero Anchored by a Customer Quote
Pitch on the left, a marked-up figure and blockquote on the right, so the claim and the evidence for it share the fold instead of sitting a scroll apart.
Hero with Proof Metrics
A centered hero closing on a definition list of scale numbers, with a masked grid wash behind it — for infrastructure and payments, where "how many" is the second question a buyer asks.
Editorial Masthead Hero
A serif display headline over a 60-character standfirst and a real byline, with one text link and no competing CTAs — the hero for publications and essays, where the writing is the product.
Full-Bleed Media Hero
Copy over your own image or video, with a graded scrim and deliberately fixed light-on-dark text — because the background is a photograph in both themes, so flipping the copy would break it.
Integration Wall Hero
A hero whose visual is the connector list itself, marked up as a real list so a visitor can skim it for their own stack — asset-free initials tiles, no third-party marks to license.
Appointment Booking Hero
A day strip built as a radio group rather than buttons, so arrow keys move between dates and sold-out days disable properly — the fold for anything sold by the appointment.
Hero with Inline Price
Names the price above the fold for single-plan and one-time products, with the former price in a real strikethrough element so it is never announced as the current one.