Above the Fold

Content visible before any scrolling.

html

<div class="fold fold--desktop" style="background:#FAF7F2;">
  <div class="fold__chrome"><span></span><span></span><span></span></div>
  <div class="fold__viewport">
    <h2 class="fold__headline">Everything you need, nothing you don&#39;t</h2>
    <p class="fold__sub">See it before you scroll, or don&#39;t see it at all.</p>
    <div class="fold__line" aria-hidden="true"><span>fold</span></div>
    <p class="fold__below">More content continues below…</p>
  </div>
</div>
<style>
.fold { font: 16px/1.5 system-ui, sans-serif; color: #241430; border-radius: 12px; overflow: hidden; border: 1px solid #24143022; margin: 0 auto; }
.fold--desktop { max-width: 560px; }
.fold--tablet { max-width: 420px; }
.fold--mobile { max-width: 280px; }
.fold__chrome { display: flex; gap: 6px; padding: 10px 14px; background: #24143010; }
.fold__chrome span { width: 9px; height: 9px; border-radius: 50%; background: #24143040; }
.fold__viewport { padding: 28px 24px 40px; position: relative; }
.fold__headline { margin: 0 0 8px; font-size: 24px; font-weight: 700; }
.fold__sub { margin: 0; color: #241430cc; }
.fold__line { border-top: 2px dashed #24143055; margin: 24px 0 16px; position: relative; text-align: center; }
.fold__line span { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: inherit; padding: 0 8px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #24143088; }
.fold__below { opacity: .35; margin: 0; font-size: 14px; }
</style>

tailwind

<div class="fold-tw fold-tw--desktop font-sans text-[#241430] rounded-xl overflow-hidden border border-[#24143022] mx-auto" style="background:#FAF7F2;">
  <div class="flex gap-1.5 px-3.5 py-2.5 bg-[#24143010]"><span class="w-2.5 h-2.5 rounded-full bg-[#24143040]"></span><span class="w-2.5 h-2.5 rounded-full bg-[#24143040]"></span><span class="w-2.5 h-2.5 rounded-full bg-[#24143040]"></span></div>
  <div class="px-6 pt-7 pb-10 relative">
    <h2 class="m-0 mb-2 text-2xl font-bold">Everything you need, nothing you don&#39;t</h2>
    <p class="m-0 text-[#241430]/80">See it before you scroll, or don&#39;t see it at all.</p>
    <div class="relative text-center my-6 border-t-2 border-dashed border-[#24143055]" aria-hidden="true"><span class="absolute -top-2.5 left-1/2 -translate-x-1/2 bg-inherit px-2 text-[11px] uppercase tracking-wide text-[#24143088]">fold</span></div>
    <p class="opacity-35 m-0 text-sm">More content continues below…</p>
  </div>
</div>
<style>
.fold-tw--desktop { max-width: 560px; }
.fold-tw--tablet { max-width: 420px; }
.fold-tw--mobile { max-width: 280px; }
</style>

react

export function AboveTheFold({
  headline = "Everything you need, nothing you don't",
  subtext = "See it before you scroll, or don't see it at all.",
  device = "desktop",
  showFold = true,
  bg = "#FAF7F2",
}) {
  const width = { desktop: 560, tablet: 420, mobile: 280 }[device] ?? 560;
  return (
    <div style={{ font: "16px/1.5 system-ui, sans-serif", color: "#241430", borderRadius: 12, overflow: "hidden",
      border: "1px solid #24143022", margin: "0 auto", maxWidth: width, background: bg }}>
      <div style={{ display: "flex", gap: 6, padding: "10px 14px", background: "#24143010" }}>
        <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#24143040" }} />
        <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#24143040" }} />
        <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#24143040" }} />
      </div>
      <div style={{ padding: "28px 24px 40px", position: "relative" }}>
        <h2 style={{ margin: "0 0 8px", fontSize: 24, fontWeight: 700 }}>{headline}</h2>
        <p style={{ margin: 0, color: "#241430cc" }}>{subtext}</p>
        {showFold && (
          <div aria-hidden="true" style={{ borderTop: "2px dashed #24143055", margin: "24px 0 16px", position: "relative", textAlign: "center" }}>
            <span style={{ position: "absolute", top: -10, left: "50%", transform: "translateX(-50%)", background: bg,
              padding: "0 8px", fontSize: 11, letterSpacing: "0.05em", textTransform: "uppercase", color: "#24143088" }}>fold</span>
          </div>
        )}
        <p style={{ opacity: 0.35, margin: 0, fontSize: 14 }}>More content continues below…</p>
      </div>
    </div>
  );
}