Search & Filters

Search bars, filter pills, segmented filter groups, and the command palette. For wired-up behavior the app provides shared partials — shared/typeahead, shared/chip_search, shared/filter_popover, shared/filter_sheet, and shared/global_search (Cmd+K). The examples below are the static styles.

Search Bar

HTML

<div class="ziom-search">
  <i class="ph ph-magnifying-glass ziom-search-icon"></i>
  <input type="text" class="ziom-search-input" placeholder="Search buildings, leads, tours…">
</div>

Filter Pills

HTML

<button class="ziom-filter-pill active">All</button>
<button class="ziom-filter-pill">Active</button>
<button class="ziom-filter-pill">Archived</button>

Filter Group

HTML

<div class="ziom-filter-group">
  <button class="ziom-filter-group-item active">All</button>
  <button class="ziom-filter-group-item">Active</button>
  <button class="ziom-filter-group-item">Archived</button>
</div>

Active Filters

Active

HTML

<div class="ziom-active-filters">
  <span class="ziom-active-filter">
    <span class="ziom-active-filter-label">Status:</span>
    <span class="ziom-active-filter-value">Active</span>
    <button class="ziom-active-filter-remove" aria-label="Remove"><i class="ph ph-x"></i></button>
  </span>
  <button class="ziom-clear-all-filters">Clear all</button>
</div>

Keyboard Keys

The global search palette opens with ⌘ K.

⌘ K esc

HTML

<span class="ziom-kbd">⌘</span>
<span class="ziom-kbd">K</span>
<span class="ziom-kbd">esc</span>