136Editor layout

The creation screen's two panes: the record on the left, everything ABOUT the record in a sticky rail of hairline RailBox groups — status, thumbnail, tags, visibility. Collapses to one column below lg.

Use it for

Course creation, lesson editing, any record-with-settings screen

Not for

Simple settings forms — a narrow single column is enough

Rail boxes

Status

Draft

Thumbnail

Drop an image, or browse

markup

<div class="ns-editor__rail" style="position:static;inline-size:17rem">
  <section class="ns-railbox">
    <h2 class="ns-railbox__title">Status</h2>
    <span class="ns-status ns-status--idle">Draft</span>
  </section>
  <section class="ns-railbox">
    <h2 class="ns-railbox__title">Thumbnail</h2>
    <label class="ns-dropzone ns-dropzone--compact">
      <i class="ph ph-upload-simple ns-dropzone__icon" aria-hidden="true"></i>
      <span>Drop an image, or browse</span>
      <input type="file" accept="image/*">
    </label>
  </section>
</div>