Search

<div class="d-flex flex-column gap-3">
  <div class="field">
    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <input id="sr-1" name="sr-1" type="search" placeholder="Search pages" data-list-search="sr-pages">
    <kbd>⌘K</kbd>
  </div>
  <ul class="list list-divided list-flush" id="sr-pages">
    <li class="list-empty" hidden>No page by that name</li>
    <li data-tags="overview">
      <a class="list-row" href="index.html">
        <div class="media">
          <span class="icon-tile accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Overview</span></div>
        </div>
      </a>
    </li>
    <li data-tags="orders">
      <a class="list-row" href="ecommerce-orders.html">
        <div class="media">
          <span class="icon-tile accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Orders</span></div>
        </div>
      </a>
    </li>
    <li data-tags="customers">
      <a class="list-row" href="ecommerce-customers.html">
        <div class="media">
          <span class="icon-tile accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Customers</span></div>
        </div>
      </a>
    </li>
    <li data-tags="invoices">
      <a class="list-row" href="invoices.html">
        <div class="media">
          <span class="icon-tile accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Invoices</span></div>
        </div>
      </a>
    </li>
    <li data-tags="settings">
      <a class="list-row" href="settings.html">
        <div class="media">
          <span class="icon-tile accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Settings</span></div>
        </div>
      </a>
    </li>
  </ul>
</div>

<div class="d-flex flex-column gap-3">
  <div class="d-flex align-items-center gap-2">
    <div class="field">
      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
      <input id="sr-2" name="sr-2" type="search" placeholder="Search orders" data-table-search="sr-orders">
    </div>
    <select id="sr-3" name="sr-3" class="form-select" aria-label="Status" data-table-filter="sr-orders">
      <option value>All statuses</option>
      <option value="Processing">Processing</option>
      <option value="Shipped">Shipped</option>
      <option value="Delivered">Delivered</option>
    </select>
  </div>
  <div class="table-wrap">
    <table class="table table-hover align-middle" id="sr-orders">
      <caption class="sr-only">Orders</caption>
      <thead>
        <tr>
          <th scope="col">Order</th>
          <th scope="col">Customer</th>
          <th scope="col">Status</th>
          <th class="end" scope="col">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><b>#11330</b></td>
          <td>Nora Svensson</td>
          <td><span class="badge bg-success-subtle text-success-emphasis"><span class="dot"></span>Delivered</span></td>
          <td class="end num">$204.12</td>
        </tr>
        <tr>
          <td><b>#11329</b></td>
          <td>Liam Walsh</td>
          <td><span class="badge bg-success-subtle text-success-emphasis"><span class="dot"></span>Delivered</span></td>
          <td class="end num">$160.92</td>
        </tr>
        <tr>
          <td><b>#11328</b></td>
          <td>Ava Thompson</td>
          <td><span class="badge bg-info-subtle text-info-emphasis"><span class="dot"></span>Processing</span></td>
          <td class="end num">$93.32</td>
        </tr>
        <tr>
          <td><b>#11327</b></td>
          <td>Nora Svensson</td>
          <td><span class="badge bg-info-subtle text-info-emphasis"><span class="dot"></span>Processing</span></td>
          <td class="end num">$82.52</td>
        </tr>
        <tr>
          <td><b>#11326</b></td>
          <td>Sean Gallagher</td>
          <td><span class="badge bg-info-subtle text-info-emphasis"><span class="dot"></span>Shipped</span></td>
          <td class="end num">$160.92</td>
        </tr>
        <tr>
          <td><b>#11325</b></td>
          <td>Julia Weber</td>
          <td><span class="badge bg-info-subtle text-info-emphasis"><span class="dot"></span>Processing</span></td>
          <td class="end num">$33.92</td>
        </tr>
        <tr class="table-empty" hidden data-table-empty>
          <td colspan="4"><b>No results</b><span class="muted"> · Try other words or clear the filter.</span></td>
        </tr>
      </tbody>
    </table>
    <p class="table-empty" data-table-empty hidden>No rows match your search.</p>
  </div>
</div>