Design Atlas
한국어
▭ Landing page patterns

Hero section

히어로 섹션

The top-of-page block that states a product's value in one line and pushes the first action.

Also known as: Hero bannerAbove-the-fold hero
···
html
<div class="hero">
  <div class="copy">
    <span class="badge">NEW · v2.0</span>
    <h1>Ship your product<br/>10&times; faster</h1>
    <p>The all-in-one toolkit for teams who move quick.</p>
    <div class="ctas">
      <button class="btn primary">Start free trial</button>
      <button class="btn ghost">Watch demo</button>
    </div>
  </div>
  <div class="visual">
    <span class="blob"></span>
    <div class="card"><i></i><i></i><i></i></div>
  </div>
</div>
css
.hero{width:min(94%,880px);height:min(90%,300px);display:flex;align-items:center;gap:5%}
.copy{flex:1.35;display:flex;flex-direction:column;gap:clamp(6px,1.5vmin,10px)}
.badge{align-self:flex-start;font-size:clamp(8px,1.3vmin,11px);font-weight:700;letter-spacing:.06em;
  padding:.35em .9em;border-radius:999px;background:color-mix(in oklab,var(--accent) 16%,var(--surface));
  color:var(--accent);border:1px solid color-mix(in oklab,var(--accent) 35%,var(--line))}
h1{margin:0;font-size:clamp(15px,4.4vmin,32px);line-height:1.12;font-weight:800;letter-spacing:-.01em}
.copy p{margin:0;font-size:clamp(8px,1.8vmin,13px);color:var(--muted);max-width:32ch}
.ctas{display:flex;gap:clamp(6px,1.2vmin,10px);margin-top:clamp(2px,.6vmin,4px)}
.btn{font-size:clamp(8px,1.5vmin,12px);font-weight:700;padding:.6em 1.2em;border-radius:8px;border:1px solid transparent}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 6px 16px color-mix(in oklab,var(--accent) 40%,transparent)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--fg)}
.visual{flex:1;position:relative;aspect-ratio:4/3;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);overflow:hidden;display:grid;place-items:center}
.blob{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;filter:blur(18px);opacity:.55;
  background:conic-gradient(from 0deg,var(--accent),var(--accent-2),var(--accent-3),var(--accent));
  animation:spin 8s linear infinite}
.card{position:relative;width:64%;aspect-ratio:5/3;border-radius:10px;background:var(--bg);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:14%;padding:10%;
  box-shadow:0 10px 24px rgba(0,0,0,.12)}
.card i{display:block;height:14%;border-radius:3px;background:var(--line)}
.card i:nth-child(1){width:60%;background:var(--accent-2)}
.card i:nth-child(2){width:85%}
.card i:nth-child(3){width:40%}
@keyframes spin{to{transform:rotate(360deg)}}

The block visitors see first, before any scrolling. It typically pairs a small badge, a large headline, a supporting subhead, one or two CTA buttons, and a product visual — screenshot, illustration, or animation.

Write the headline so a visitor understands what the product is for within five seconds. The subhead adds one more line — who it's for, or what makes it different. The primary CTA gets the accent color and visual weight; a secondary CTA ("Watch demo") stays outlined or ghost so it doesn't compete.

Vague headlines ("Build a better future") convert worse than specific ones. Button copy that states the outcome ("Try it free") beats generic verbs ("Get started"). And an overly busy visual can undercut the headline's readability instead of supporting it.

When to use

The opening block of virtually every marketing or landing page. If a page serves multiple products or audiences, vary the headline per page to match the traffic source.