144Band
The full-width page section every other section is built on: an inner container, an optional kicker/title/lede head, and three tones — plain, sunken, dark navy. A page is a stack of bands.
Use it for
- Wrapping any full-width section of a marketing or landing page
- The dark navy tone for the hero and the closing CTA
- sunken for quiet in-between bands (logos, testimonial)
Not for
- App screens inside the admin shell — those use .ns-pagehead + content, not bands
- Nesting a band inside a band
Head grammar
Kicker (the code-comment label), balanced title, lede.
A curriculum, not a pile of videos
Every course follows the same shape: concept, concrete example, bridge to the next step.
markup
<div class="ns-band ns-band--tight"><div class="ns-band__inner">
<header class="ns-band__head">
<span class="ns-kicker">Why this works</span>
<h2 class="ns-band__title">A curriculum, not a pile of videos</h2>
<p class="ns-band__lede">Every course follows the same shape: concept, concrete example, bridge to the next step.</p>
</header>
</div></div>Dark + grid
The navy console band with the dissolving hairline grid — hero and CTA only.
One roadmap, admin to developer
markup
<div class="ns-band ns-band--dark ns-band--grid ns-band--tight"><div class="ns-band__inner">
<span class="ns-kicker">Learn Salesforce, properly</span>
<h2 class="ns-band__title">One roadmap, admin to developer</h2>
</div></div>Actions slot
A band does NOT define its own action. It leaves .ns-band__actions and the page puts a Button in it, at whatever variant and size that page needs. Baking the action into the section is how a system ends up with six section components that each hard-code a differently-sized button — and why buttons drift out of proportion with the cards beside them. --between puts the head and the actions on one line, which is the shape a "Latest courses … View all" band wants.
Latest courses
markup
<section class="ns-band ns-band--tight">
<div class="ns-band__inner">
<div class="ns-band__head ns-band__head--between">
<div>
<span class="ns-kicker">Catalog</span>
<h2 class="ns-band__title">Latest courses</h2>
</div>
<div class="ns-band__actions">
<a class="ns-btn ns-btn--outline ns-btn--sm" href="#">Browse all <i class="ph ph-arrow-right ns-btn__arrow" aria-hidden="true"></i></a>
</div>
</div>
<div class="ns-course-grid">
<div class="ns-card ns-ccard ns-ccard--compact"><div class="ns-card__body"><span class="ns-card__kicker">// Course</span><a class="ns-card__link" href="#"><span class="ns-card__title">Apex basics</span></a><span class="ns-ccard__meta"><span>12 lessons</span></span></div></div>
<div class="ns-card ns-ccard ns-ccard--compact"><div class="ns-card__body"><span class="ns-card__kicker">// Course</span><a class="ns-card__link" href="#"><span class="ns-card__title">SOQL, properly</span></a><span class="ns-ccard__meta"><span>6 lessons</span></span></div></div>
<div class="ns-card ns-ccard ns-ccard--compact"><div class="ns-card__body"><span class="ns-card__kicker">// Course</span><a class="ns-card__link" href="#"><span class="ns-card__title">LWC from scratch</span></a><span class="ns-ccard__meta"><span>14 lessons</span></span></div></div>
</div>
</div>
</section>Collapsible band
A section that folds — native <details>, so keyboard operation, in-page find and the open state are the platform's. For SECONDARY sections on a long page: requirements, the full syllabus, an FAQ group. The band that answers "what is this" never folds, because a collapsed section is one a reader has to decide to open, and most will not. Live — click the heading.
Requirements
ShowHide
- A free Salesforce Developer org — we set one up in lesson 01.
- Any browser. Nothing to install.
- No prior Apex. Some experience with any programming language helps.
markup
<details class="ns-band ns-band--tight ns-band--collapsible" open>
<div class="ns-band__inner">
<summary class="ns-band__toggle">
<h2 class="ns-band__title">Requirements</h2>
<span class="ns-band__toggle-hint">
<span class="ns-band__toggle-open">Show</span><span class="ns-band__toggle-close">Hide</span>
<i class="ph ph-caret-down" aria-hidden="true"></i>
</span>
</summary>
<div class="ns-band__panel">
<ul class="ns-outcomes ns-outcomes--plain">
<li><i class="ph ph-check-circle" aria-hidden="true"></i><span>A free Salesforce Developer org — we set one up in lesson 01.</span></li>
<li><i class="ph ph-check-circle" aria-hidden="true"></i><span>Any browser. Nothing to install.</span></li>
<li><i class="ph ph-check-circle" aria-hidden="true"></i><span>No prior Apex. Some experience with any programming language helps.</span></li>
</ul>
</div>
</div>
</details>Accessibility contract
- Each band is a
; the band title is the section's heading in document order - The hairline-grid motif is decorative and pointer-transparent