Quicksearch

Summary

The pill-shaped search input designed for the header bar. Styling-only: wire the input to your own search behavior.

All quicksearch rules are scoped to .neura-header; outside a header the class applies no styling. On focus the pill brightens from the faint tint to the page background. No search glyph ships with the input (AUI embedded a PNG): add your own via a positioned <span class="neura-icon neura-icon-search"> next to the input or a background-image override - the input's inline-start padding (25px) already reserves the space.

Examples

HTML

Inside the header, quicksearch sits as a nav item in the secondary slot (that's what vertically centers it in the bar):

<header class="neura-header" role="banner">
  <div class="neura-header-inner">
    <div class="neura-header-primary">
      <h1 class="neura-header-logo">
        <a href="#"><span class="neura-header-logo-text">NSYS</span></a>
      </h1>
    </div>
    <div class="neura-header-secondary">
      <ul class="neura-nav">
        <li>
          <form class="neura-quicksearch" role="search">
            <input type="search" placeholder="Search" aria-label="Search">
          </form>
        </li>
      </ul>
    </div>
  </div>
</header>

AUI compatibility

aui-quicksearch aliases onto the Neura rules. CSS-only.