Boluo/ design
Sheet 02.05 / Components · Layout

SectionHead

A section title with a mono label, an optional count and an optional see-all link. The label numbers the section like a drawing sheet: 01 / Tokens.

CLASSb-section-headDRAWNCLAUDECHECKEDBOLUOLICENSEMIT
Fig. 1 — sectionheadlive, on a 768 rail
home / section
02 / Notes

Notes11

All notes
Anatomy

Parts

PartClassNotes
Head.b-section-headLabel and title on the left, link on the right.
Count.b-countMono superscript in caption.
Link.b-moreOptional, always ends in an arrow.
Markup

Code

bundle.css
<div class="b-sheet">
  <div class="b-row">
    <div class="b-rail b-pad b-section-head">
      <div>
        <span class="b-caption">02 / Notes</span>
        <h2 class="b-title">Notes<sup class="b-count">11</sup></h2>
      </div>
      <a class="b-more" href="#all">All notes</a>
    </div>
  </div>
</div>
Do
  • Number sections in order down the page.
  • Show a count only when it is real.
Don't
  • Write the label in sentence case; labels are mono upper case.
  • Add a see-all link to a section that already shows everything.
© 2026 Boluo · with ClaudePixel pineapple