<section class="ticket">
  <p class="eyebrow">Workspace · Team</p>
  <h1>Start something</h1>
  <div class="perf"></div>
  <p class="muted">Create it, share the code, wait for approval.</p>
  <div class="stub" style="margin-top:16px">
    <span>@xyoda</span>
    <span>code valid 4 min</span>
  </div>
</section>

<section class="ticket">
  <div class="job-head">
    <span class="printer-pic placeholder md" aria-hidden="true">A1</span>
    <div class="grow">
      <p class="eyebrow">Team Alpha</p>
      <h2 class="job-name">Report v3</h2>
      <p class="small mono job-file">report_v3.pdf</p>
    </div>
  </div>
  <div class="perf"></div>
  <div class="action-bar">
    <button class="btn primary block lg" type="button">Ask for approval</button>
  </div>
</section>

<div class="panel">
  <h3>Panel</h3>
  <p class="muted small">same surface as a ticket, for plain content.</p>
</div>

<ul class="cards">
  <li>
    <a class="card-link" href="#">
      <span class="printer-pic placeholder sm" aria-hidden="true">A1</span>
      <div class="grow">
        <h3>Report v3</h3>
        <p class="small muted">Team Alpha · 47 min · 3 tasks</p>
      </div>
      <span class="stamp ok">Active</span>
    </a>
  </li>
  <li>
    <a class="card-link" href="#">
      <span class="printer-pic placeholder sm" aria-hidden="true">B2</span>
      <div class="grow">
        <h3>Launch plan</h3>
        <p class="small muted">Team Beta · 1 h 12 min</p>
      </div>
      <span class="stamp wait">Waiting</span>
    </a>
  </li>
</ul>