Naluma Theme

3.4 #organisms.filter-bar Filter Bar

Layout composition for search + filter controls. Responsive: stacks vertically on mobile.

Tokens: $spacing-xs, $spacing-micro, $component-filter-bar-search-flex-basis

Example

Markup

<div class="tinnitus-filter-bar">
  <form class="tinnitus-filter-bar__form">
    <div class="tinnitus-filter-bar__search">
      <input class="tinnitus-filter-bar__input" type="text">
    </div>
    <div class="tinnitus-filter-bar__filters">
      <select class="tinnitus-filter-bar__select">...</select>
    </div>
    <button class="tinnitus-filter-bar__submit">Search</button>
  </form>
</div>

Source: web/app/themes/naluma-theme/assets/scss/organisms/_filter-bar.scss, line 1