Search

Search allows users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

HTML

<div>

  <label for="prefix" class="sr-only">Search</label>
  <div class="relative flex items-center">
    <input
      id="prefix"
      type="search"
      class="p-2 w-full max-w-lg h-8 border border-r-0 border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
    />
    <button class="rounded-r font-bold leading-none text-white px-4 h-8 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Search</button>
  </div>

</div>

Large

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

HTML

<div>

  <label for="prefix" class="sr-only">Search</label>
  <div class="relative flex items-center">
    <input
      id="prefix"
      type="search"
      class="p-2 text-xl w-full max-w-lg h-12 border border-r-0 border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
    />
    <button class="rounded-r font-bold leading-none text-white text-xl px-8 h-12 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Search</button>
  </div>

</div>

Icon Button

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

HTML

<div>

  <label for="prefix" class="sr-only">Search</label>
  <div class="relative flex items-center">
    <input
      id="prefix"
      type="search"
      class="p-2 w-full max-w-lg h-8 border border-r-0 border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
    />
    <button aria-label="search" class="rounded-r flex items-center font-bold leading-none text-white px-3 h-8 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">
      <div class="icon-[material-symbols--search] size-6"></div>
    </button>
  </div>

</div>