145Hero

The page opener: kicker, display-size balanced title, lede, two actions and one mono proof line. Text-first — no screenshot collage, no illustration required.

Use it for

The top of the home page and major landing pages
The proof line for one concrete fact — course count, price, cohort date

Not for

Interior pages — a PageHead or a plain h1 opens those
More than two actions; the second is already optional

Dark hero

Learn Salesforce, properly

The training roadmap for people who build on Salesforce

Courses, a step-by-step roadmap and working code.

Start learning Browse the roadmap

12 courses · 214 lessons · free while in beta

markup

<div class="ns-band ns-hero ns-band--dark ns-band--grid" style="padding-block:var(--space-10)"><div class="ns-band__inner">
  <span class="ns-kicker">Learn Salesforce, properly</span>
  <h1 class="ns-hero__title" style="font-size:var(--size-h1)">The training roadmap for people who build on Salesforce</h1>
  <p class="ns-hero__lede">Courses, a step-by-step roadmap and working code.</p>
  <div class="ns-hero__actions">
    <a class="ns-btn ns-btn--white" href="#">Start learning</a>
    <a class="ns-btn ns-btn--ghost" href="#">Browse the roadmap</a>
  </div>
  <span class="ns-hero__proof">12 courses · 214 lessons · free while in beta</span>
</div></div>

Full page

All seven bands composed in canonical order — the framework-agnostic template rendered with the real stylesheet.

Open the full-page demo

markup

<p><a class="ns-btn ns-btn--outline ns-btn--sm" href="./demo-sections.html" target="_blank" rel="noopener">Open the full-page demo <i class="ph ph-arrow-up-right" aria-hidden="true"></i></a></p>

Accessibility contract

The title is the page's h1
Proof line is real text, not an image