Components

Page Hero

The interior-page hero used on every page except the home page — breadcrumb, kicker, line-reveal headline, and an optional stat meta box.

Markup

<section class="phero on-dark" id="top">
  <p class="meta">MEDIAN DOOR-TIME 47 MIN<br>412 PARTS ON THE TRUCK</p>
  <nav class="crumbs" aria-label="Breadcrumb"><a href="index.html">HOME</a> / <a href="services.html">TRADES</a> / HEATING</nav>
  <span class="kicker">/ 02 &mdash; HEATING</span>
  <h1 class="d"><span class="line"><span>Fifty-four degrees</span></span><span class="line"><span><em>and falling.</em></span></span></h1>
  <div class="sub">
    <div>
      <p>Furnace, boiler, or heat pump &mdash; Marcus has kept Winslow warm for 18 winters.</p>
      <div class="ctas"><a class="btn" href="contact.html">Get my quote</a></div>
    </div>
  </div>
</section>

Compact modifier

Add .compact for a shorter hero with no forced minimum height — used on pages whose content starts higher up the fold, like Contact and the legal document pages.

<section class="phero compact on-dark" id="top">
  <nav class="crumbs" aria-label="Breadcrumb"><a href="index.html">HOME</a> / CONTACT</nav>
  <span class="kicker">WORK ORDER N&ordm; 31,407 STARTS HERE</span>
  <h1 class="d"><span class="line"><span>Tell us</span></span><span class="line"><span><em>what broke.</em></span></span></h1>
</section>

Full hero-section size

Add .hero-section to size the headline up to the same large display size as the home page's Hero, for interior pages that want the biggest possible statement (used on the 404 page).

Article title size

Add .article-title to the <h1> for a smaller display size sized for longer running text — used on the blog single post and the legal document pages, where the headline is a full sentence rather than a two-word statement.

<h1 class="d article-title"><span class="line"><span>Privacy</span></span><span class="line"><span>policy.</span></span></h1>
<p class="m post-meta">EFFECTIVE MARCH 1, 2026 &middot; N&ordm; DOC-01</p>

Search line (404 only)

The 404 page's phero adds a .search-line field wrapper below its CTAs for an inline site search input — see 404.

Javascript

Same headline line-reveal behavior as Hero: main.js adds .on after load to trigger the staggered slide-up transition, with an immediate fallback under prefers-reduced-motion or no-JS.