NS Design System
v3.0.0 · 257 tokens

65Helpdesk tickets

Raise-a-ticket, ticket list and thread. The console voice doing its native job — a ticket IS a record, so the mono #0042, the status dot and the terminal rows are structure, not decoration.

Use it for

  • Support for the LMS: broken lessons, org trouble, billing

Not for

  • Live chat — this is an asynchronous record

Ticket list

Real links; urgent carries the 3px leading edge.

#0042 Lesson 07 video will not load Player spins forever, tried two browsers… In progress #0038 Certificate name spelled wrong Resolved
markup
<div class="ns-tickets" style="max-inline-size:34rem">
  <a class="ns-ticket ns-ticket--urgent" href="#">
    <span class="ns-ticket__id">#0042</span>
    <span class="ns-ticket__body">
      <span class="ns-ticket__subject">Lesson 07 video will not load</span>
      <span class="ns-ticket__excerpt">Player spins forever, tried two browsers…</span>
    </span>
    <span class="ns-status ns-status--info">In progress</span>
    <time class="ns-ticket__when">2h ago</time>
  </a>
  <a class="ns-ticket" href="#">
    <span class="ns-ticket__id">#0038</span>
    <span class="ns-ticket__body"><span class="ns-ticket__subject">Certificate name spelled wrong</span></span>
    <span class="ns-status ns-status--success">Resolved</span>
    <time class="ns-ticket__when">4d ago</time>
  </a>
</div>

Priority picker

markup
<div class="ns-priority-row" style="max-inline-size:24rem">
  <label class="ns-priority"><input type="radio" name="pr-d" value="low"><span>Low</span></label>
  <label class="ns-priority"><input type="radio" name="pr-d" value="normal" checked><span>Normal</span></label>
  <label class="ns-priority"><input type="radio" name="pr-d" value="high"><span>High</span></label>
  <label class="ns-priority ns-priority--urgent"><input type="radio" name="pr-d" value="urgent"><span>Urgent</span></label>
</div>

Thread

Agent = brand edge, note = warning edge — and both say what they are in words.

Priya
Console shows a 403 on the manifest.
Dev· support
That URL rotated this morning — hard-refresh and try again?
markup
<div class="ns-thread" style="max-inline-size:30rem">
  <article class="ns-msg">
    <header class="ns-msg__head"><span>Priya</span><time>2h ago</time></header>
    <div class="ns-msg__body">Console shows a 403 on the manifest.</div>
  </article>
  <article class="ns-msg ns-msg--agent">
    <header class="ns-msg__head"><span>Dev</span><span>· support</span><time>1h ago</time></header>
    <div class="ns-msg__body">That URL rotated this morning — hard-refresh and try again?</div>
  </article>
</div>

Attachment target

markup
<label class="ns-attach" style="max-inline-size:24rem">
  <i class="ph ph-folder-open" aria-hidden="true"></i> Attach a screenshot (optional)
  <input type="file">
</label>

Accessibility contract

  • Priority is a real radio fieldset — arrows work natively, the group announces as one question
  • Urgent alone may wear the error hue, and only once selected