ds
Components
Panel

Panel

Side panels with sections and fields.

Code

<aside class="panel">
  <div class="panel-head"><h4>Component</h4><button class="btn icon sm ghost" aria-label="Close panel">…</button></div>
  <div class="panel-sec">
    <p class="label">Text</p>
    <label class="fld"><span>Label</span><input class="inp" value="PostgreSQL" /></label>
  </div>
  <div class="panel-sec">
    <p class="label">Look</p>
    <div class="fld"><span>Kind</span><div class="seg fill" role="radiogroup">…</div></div>
    <div class="fld"><span>Tone</span><div class="tones" role="radiogroup">…</div></div>
  </div>
  <div class="panel-sec"><p class="hint">…</p></div>
</aside>

topo's properties, diagram and code panels. The head sticks while the body scrolls; sections are separated by rules and start with a label.

Class	On	What it does
`.panel`	aside	Floating surface with padding and --shadow. Position it yourself.
`.panel-head`	div	Sticky title row.
`.panel-sec`	div	A section: a grid of fields with a rule under it.
`.fld / .two / .hint / .meta`	label, div, p	Fields, two-up rows, help text, mono footnote.