Design Atlas
한국어
⌘ UX terms & laws

Above the Fold

어보브 더 폴드

The area visible without scrolling. The term comes from a folded newspaper's top half — what you see on the newsstand.

Also known as: Above-the-fold폴드 위
···
html
<div class="frame">
  <div class="chrome"><span></span><span></span><span></span></div>
  <div class="content">
    <div class="hero"></div>
    <div class="fold"></div>
    <div class="sec"></div>
    <div class="sec"></div>
  </div>
  <div class="wheel">⇅</div>
</div>
css
.frame{position:relative;width:90%;height:90%;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.chrome{height:9%;display:flex;align-items:center;gap:5px;padding:0 8px;border-bottom:1px solid var(--line)}
.chrome span{width:7px;height:7px;border-radius:50%;background:var(--line)}
.content{position:relative;height:91%}
.hero{position:absolute;top:6%;left:8%;right:8%;height:30%;border-radius:8px;background:var(--accent);opacity:.85}
.fold{position:absolute;top:42%;left:0;right:0;border-top:2px dashed var(--accent-2)}
.sec{position:absolute;left:8%;right:8%;height:18%;border-radius:8px;background:var(--line);opacity:.4}
.sec:nth-of-type(3){top:52%}
.sec:nth-of-type(4){top:74%}
.wheel{position:absolute;left:50%;top:44%;transform:translateX(-50%);font-size:14px;color:var(--muted);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,6px);opacity:1}}

The term comes from newspaper layout: when a paper is displayed folded in half, the most important headline goes above the fold, visible on the newsstand. On the web it came to mean "whatever's visible in the viewport without scrolling."

It's also widely misunderstood — repeated NN/g research found people scroll readily and don't ignore below-the-fold content outright. Still, the core principle holds: your core value proposition and primary CTA should be visible without scrolling to reduce bounce, especially on short mobile viewports.

In the demo's browser-frame mock, content above the dashed fold line stays bright while content below dims, and a scroll-wheel icon keeps nudging that there's more below.

When to use

Put the core message and CTA inside the viewport for a hero section. But don't strip content below it on the assumption nobody scrolls.