Boluo/ design
Sheet 02.04 / Components · Layout

PageHead

The top of an index page: a sheet label, a display title with a count, one line of intro and the page's pineapple figure. Each index page picks one figure and keeps it.

CLASSb-page-headDRAWNCLAUDECHECKEDBOLUOLICENSEMIT
Fig. 1 — pageheadlive, on a 768 rail
index page / head
Sheet 02 / Notes

Notes11

Working notes on drawing interfaces like engineering sheets: grids, hairlines, type and the one spot of yellow.

Anatomy

Parts

PartClassNotes
Head.b-page-headCopy on the left, figure on the right; the figure moves above on phones.
Label.b-captionNumbers the page like a drawing sheet: Sheet 02 / Notes.
Count.b-countA mono superscript after the title.
Figure.b-figure-art112px, decorative, alt="".
Markup

Code

bundle.css
<div class="b-sheet">
  <div class="b-row">
    <div class="b-rail b-pad b-page-head">
      <div>
        <span class="b-caption">Sheet 02 / Notes</span>
        <h1 class="b-display" style="margin-top:12px">Notes<sup class="b-count">11</sup></h1>
        <p>Working notes on drawing interfaces like engineering sheets: grids, hairlines, type and the one spot of yellow.</p>
      </div>
      <img class="b-figure-art" src="/brand/half.svg" alt="">
    </div>
  </div>
</div>
Do
  • Give each index page its own drawing: a section cut for notes, the bitten slice for 404.
  • Keep the intro to one sentence.
Don't
  • Give the figure alt text; it is decoration.
  • Use a PageHead on an article; that is the ArticleHeader.
© 2026 Boluo · with ClaudePixel pineapple