Search input

Looking for something?


How we design them

  • The border of the search input has a 4px border width. This is used to draw attention to the input as it is the main feature of the page
  • The height of the input is 48px, which is our standard height for inputs

How they look

View demo Open in new window
320 x 568
View code
<form class="gg-c-search" action="">
  <input aria-label="Search" placeholder="Search" class="gg-c-search__input" type="search">
  <button class="gg-c-search__button" aria-label="submit search">
      <svg class="gg-c-search__svg" version="1.1" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24">
          <path d="M13.6,5.9C11.2,4.6,8.3,5,6.5,7.1c-1.6,2.2-1.2,5.3,0.9,7.1c1.2,1,2.7,1.3,4.1,0.9c0.7-0.2,1.4-0.5,2-0.9 c0.3-0.2,0.6-0.4,0.9-0.7c0.2-0.2,0.4-0.4,0.6-0.6c0.8-1.3,0.9-2.9,0.5-4.3C15.1,7.6,14.5,6.4,13.6,5.9z M7.7,12.6 c-1.3-1.5-1.2-3.8,0.2-5.2c1.4-1.1,3.2-1.3,4.8-0.5c1.5,0.9,2,3.6,1.1,5.1C12.3,14.1,9.4,14.8,7.7,12.6z"></path>
          <path d="M21.5,18.4c-1.3-1.5-2.7-2.9-4.3-4.2l0.2-0.2c1.8-3.1,1-8.3-2.2-10.3C11.9,1.6,6.7,2.3,4.3,5.5c-2.4,3.4-1.8,8.1,1.4,10.8 c2.5,2.1,5.5,2,8.1,0.7c1.4,1.5,2.8,2.9,4.4,4.1c1,0.9,2.5,1,3.5,0.1C22.6,20.4,22.2,19.3,21.5,18.4z M5.7,14.3 c-2-2.5-2.1-6.5,0.4-8.8c2.3-1.9,5.5-2.2,8.1-0.8c2.7,1.6,3.4,6.1,1.9,8.6C13.5,16.8,8.7,18,5.7,14.3z M18.7,19.7 c-0.4-0.3-0.8-0.7-1.2-1.1L15,16.2c0.4-0.3,0.8-0.7,1.2-1c0.7,0.6,1.5,1.2,2.2,1.9c0.5,0.5,2.2,1.8,2.4,2.6 C20.9,21.3,18.9,19.9,18.7,19.7z"></path>
      </svg>
  </button>
</form>