138Title box & slug

A lesson is written, not filled in — so the title is a big borderless input at heading size; the hairline appears under it only on focus. The slug pairs the fixed mono prefix with a mono input.

Use it for

The title position of every creation screen
Slugs, IDs — URL parts are data, so they are mono

Not for

Ordinary form fields — those use Field + Input

Title

markup

<input class="ns-titlebox" type="text" placeholder="Lesson title…" aria-label="Title" style="max-inline-size:30rem">

Slug

markup

<span class="ns-slug" style="max-inline-size:30rem">
  <span class="ns-slug__prefix" aria-hidden="true">namaste.dev/courses/</span>
  <input class="ns-input ns-input--mono" value="admin-fundamentals" aria-label="URL slug">
</span>