Sheet 02.08 / Components · Content

Identity

The portrait cell, the name with a seal and the typewriter role line. Until there is a portrait, the cell shows the drafting placeholder: a box with its diagonals.

CLASSb-identityDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — identitylive, on a 768 rail

home / identity

Your Name

Engineer, drawing with AI

Anatomy

Parts

Part	Class	Notes
Row	`.b-identity`	Avatar cell, then the name block.
Portrait	`.b-avatar`	The portrait in a hairline cell, bottom-aligned; a crossed box until there is one.
Seal	`.b-seal`	A small mark beside the name; draw your own.
Role	`.b-role + .b-caret`	Mono role line; the caret is the cursor in pineapple.

Markup

Code

bundle.css

<div class="b-sheet">
  <div class="b-row">
    <div class="b-rail b-identity">
      <div class="b-avatar"><svg width="112" height="112" viewBox="0 0 112 112" fill="none" stroke="currentColor" aria-hidden="true" style="color:var(--line-strong)"><rect x="0.5" y="0.5" width="111" height="111"/><path d="M0 0L112 112M112 0L0 112"/></svg></div>
      <div class="b-who">
        <h1 class="b-display">Your Name</h1>
        <span class="b-role">Engineer, drawing with AI<span class="b-caret" aria-hidden="true"></span></span>
      </div>
    </div>
  </div>
</div>

Rotate the role strings; the caret keeps blinking.
Keep the placeholder until the real portrait exists.

Don't

Put a logo on the portrait.
Use the pineapple seal: it belongs to Boluo.