Use the viewport controls to check responsive behavior, then copy the implementation that fits your stack.
4 patterns
Centred hero
A focused introduction with one primary action.
centredlanding
Accessibility
The page-level heading is the visible hero heading.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Split-content hero
Copy and a visual product summary in a balanced grid.
splitproduct
Accessibility
The illustrative dashboard has a concise accessible name.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Hero with two CTAs
Clear primary and secondary paths without competing emphasis.
ctamarketing
Accessibility
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Minimal landing hero
A restrained headline, supporting line and inline action.
minimaleditorial
Accessibility
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Implementation notes
These examples use plain CSS and no external dependencies. Replace sample content and destinations while preserving the semantic structure, labels, focus treatment and responsive behavior.