Foreign Affairs Style Guide

Foreign Affairs

Search Dropdown

The search dropdown. Toggled when clicking the search icon. Uses script.js to apply open/close. Requires .site-header__search-container to be outside of the container div and inside .site-header__bottom-bar. Search term suggestions should only display when the user is typing.

Redmine Prototyping Ticket(s)
Published by the Council on Foreign Relations 
      <form class="site-search clearfix">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="63.6 300.9 872.8 829.1" enable-background="new 63.6 300.9 872.8 829.1" xml:space="preserve">
   <title>Search</title>
<path d="M936.4,1082.1L687.8,855.3c48-61.1,74.2-139.6,69.8-222.5c-8.7-191.9-170.1-340.3-362.1-331.5C203.6,310,55.2,467,64,659
	c8.7,187.5,170.1,335.9,362,327.1c82.9-4.4,157-34.9,213.7-82.9L888.3,1130L936.4,1082.1z M421.7,920.7
	c-157,4.4-287.9-113.4-292.3-266.1c-8.7-152.7,113.4-283.5,270.5-287.9c157-4.4,287.9,113.4,292.3,266.1
	C700.8,785.5,578.7,916.3,421.7,920.7z"/>
</svg>

  <input class="site-search__field" type="search" placeholder="Search 92 years of Foreign Affairs">
  <input class="site-search__button button__blue-reversed" type="submit" value="Search">
  <span class="site-search__close">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="13 659.1 596.9 595.7" enable-background="new 13 659.1 596.9 595.7" xml:space="preserve">
<title>Close</title>
<path d="M409.4,843.2l-98,98l-97.9-97.9c-4.7-4.7-11.1-4.7-15.9,0s-4.7,11.1,0,15.9l97.9,97.9l-97.8,97.8c-4.7,4.7-4.7,11.1,0,15.9
	c4.7,4.7,11.1,4.7,15.9,0l97.9-97.9l97.9,97.9c3.2,3.2,9.5,3.1,14.2-1.6c4.7-4.7,4.7-11.1,0-15.9l-97.9-97.9l97.9-97.9
	c4.7-4.7,4.7-11.1,0-15.9C420.5,838.5,412.5,840.1,409.4,843.2z M101.4,746.9C-15.4,863.8-17,1051.7,99.9,1168.5
	c115.3,115.3,304.8,115.3,421.6-1.5c116.8-116.8,118.4-304.8,1.5-421.6C407.8,630.1,218.3,630.1,101.4,746.9z M505.8,1151.2
	c-108.9,108.9-282.7,109-390.1,1.6S9.9,870.1,117.3,762.7c108.9-108.9,282.7-109,390.1-1.6S613.1,1043.9,505.8,1151.2z"/>
</svg>

  </span>
  <ul class="site-search__list">
    <li class="site-search__list-item">
      <a class="site-search__list-link" href="#">
        Iran Sanctions <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>

      </a>
    </li>
    <li class="site-search__list-item">
      <a class="site-search__list-link" href="#">
        Term Suggestion <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>

      </a>
    </li>
    <li class="site-search__list-item">
      <a class="site-search__list-link" href="#">
        Term Suggestion 2 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>

      </a>
    </li>
    <li class="site-search__list-item">
      <a class="site-search__list-link" href="#">
        Term Suggestion 3 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>

      </a>
    </li>
    <li class="site-search__list-item">
      <a class="site-search__list-link" href="#">
        Term Suggestion 4 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>

      </a>
    </li>
    <li class="site-search__list-item">
      <a href="#">
        Term Suggestion 5 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>

      </a>
    </li>
    <li class="site-search__list-item">
      <a href="#">
        Term Suggestion 6 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>

      </a>
    </li>
    <li class="site-search__list-item">
      <a href="#">
        Term Suggestion 7 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="195 398.9 610 937.8" enable-background="new 195 398.9 610 937.8" xml:space="preserve">
<g>
	<polygon points="805,867.8 336,1336.7 195,1315.5 642.6,867.8 195,420.1 336,398.9 	"/>
</g>
</svg>

      </a>
    </li>
  </ul>
</form>