OK Hero Offset Focus Offset hero layout that breaks the grid for a dynamic reading flow. candidatehero section Offset Layout Break the traditional grid A dynamic hero structure that pulls the media slightly out of alignment to create visual interest and guide the eye down. Primary actionSecondary
OK Hero Background Media Hero layout where the media (image/video) covers the entire background. candidatehero section Background Focus Immersive Visual Experience The media placeholder acts as a full-bleed background, with the copy block floating cleanly above it to ensure perfect readability. Primary actionSecondary
OK Hero Stacked Top Media Stacked hero layout with media placed prominently above the copy. candidatehero section Top Media Lead with the visual By placing the media placeholder first, this layout ensures the product or hero image is the very first thing the user sees. Primary action
OK Hero Split Product Intro Split hero with concise copy, two actions, and a large gradient media placeholder for product or service intros. candidatehero section Launch model Build the page opening faster A neutral hero structure with a clear headline, short supporting text, and a visual slot ready for the real product image. Primary actionSecondary
OK Hero Centered Statement Centered hero with compact message hierarchy and a wide gradient image placeholder below the copy. candidatehero section Simple opening One message, one clean direction A direct hero pattern for pages that need a calm first viewport before moving into proof, features, or content blocks. Get startedView details
OK Hero Offset Visual Panel Offset hero with a divided background, strong text block, and raised gradient media placeholder for editorial or SaaS layouts. candidatehero section Structured hero Present the offer with a visible visual anchor A slightly more architectural composition with room for positioning a screenshot, mockup, or campaign image. Explore
OK Hero Sidebar Pitch Sidebar-style hero with a narrow visual rail and a larger text area for concise landing page introductions. candidatehero section Compact pitch A practical first section for fast scanning Use this when the hero needs to stay utilitarian, with image support on the side and copy that gets to the point. ContinueCompare
OK Hero Stacked Preview Stacked hero with a top image placeholder, title, copy, and actions arranged for mobile-friendly page openings. candidatehero section Mobile ready Start with the image, then explain the point A stacked model for simpler pages where the placeholder visual should be the first readable signal. Open modelLearn more