Vitreo
Components

Sortable

Reorder by dragging, or with Alt and the arrow keys

Priorities

  • Fix checkout on Safari Urgent
  • New pricing page High
  • Dark mode for emails Medium
  • Update the changelog Low
Code
<ul class="sortable" data-sortable aria-label="Priorities">
  <li draggable="true" tabindex="0" aria-roledescription="sortable item">
    <svg class="icon handle" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <span class="sortable-text">Fix checkout on Safari</span>
    <span class="muted text-sm">Urgent</span>
  </li>
  <li draggable="true" tabindex="0" aria-roledescription="sortable item">
    <svg class="icon handle" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <span class="sortable-text">New pricing page</span>
    <span class="muted text-sm">High</span>
  </li>
  <li draggable="true" tabindex="0" aria-roledescription="sortable item">
    <svg class="icon handle" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <span class="sortable-text">Dark mode for emails</span>
    <span class="muted text-sm">Medium</span>
  </li>
  <li draggable="true" tabindex="0" aria-roledescription="sortable item">
    <svg class="icon handle" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <span class="sortable-text">Update the changelog</span>
    <span class="muted text-sm">Low</span>
  </li>
</ul>