Sheet 02.11 / Components · Content

NowPanel

What is on the desk this month, with pineapple-chunk bullets and a live dot. It sits beside the About copy on desktop and under it on phones.

CLASSb-nowDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — nowpanellive, from bundle.css

home / about / now

Now Oct 2026

Drawing a sheet for every component
Next.js · CSS
Writing the brief agents read before they draw
Markdown · JSON

Anatomy

Parts

Part	Class	Notes
Panel	`.b-now`	A heading with the live dot and the month, then the list.
Live dot	`.b-live`	Pineapple, pulsing; the screen's one spot when nothing else is yellow.
Bullet	`li img`	wedge.svg at 14px.

Markup

Code

bundle.css

<div class="b-now" style="max-width:320px">
  <h3>Now <span class="b-live" aria-hidden="true"></span><span class="b-meta" style="margin-left:auto">Oct 2026</span></h3>
  <ul>
    <li><img src="/brand/wedge.svg" alt=""><div><p>Drawing a sheet for every component</p><span class="b-meta">Next.js · CSS</span></div></li>
    <li><img src="/brand/wedge.svg" alt=""><div><p>Writing the brief agents read before they draw</p><span class="b-meta">Markdown · JSON</span></div></li>
  </ul>
</div>

Date it with the month it was last true.
Keep two or three items.

Don't

Show the live dot when nothing is live.
Use it as a changelog.