# Hero Section

> Hero section design patterns beyond the generic centered layout.

- Skill: `dragoon0x/hero-section` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/hero-section`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/hero-section/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/hero-section

---


# Hero Section Design

## Beyond the Generic
The centered headline + subtext + button hero is the default AI output. Here are alternatives:

### Split Hero
Content on one side, visual on the other. 60/40 or 50/50 split.

### Full-Bleed Image Hero
Image fills the viewport, text overlaid with scrim gradient.

### Video Hero
Autoplay muted video as background with minimal text overlay.

### Product Screenshot Hero
The product itself as the hero visual. "Show, don't tell."

### Editorial Hero
Large typography only, no image. Serif headline, compelling copy.

### Scroll Hero
Animated or interactive element that responds to scroll.

## Rules
1. One clear message per hero
2. One CTA maximum
3. Text must be readable on any background (test contrast)
4. Mobile: content above image, not overlaid
5. Performance: hero is the LCP element, optimize it
6. Height: 60-80vh on desktop, 50-70vh on mobile