Foreign Affairs Style Guide

Foreign Affairs

Browse -- Filter

This is the filter menu on a browse page. Note-JS Functionality still to be prototyped.

Data Sources:
Known Omissions:

Filters

Region
United States 2,318
Middle East 2,294
Europe 494
East Africa 94
Topic
U.S. Policy 2,318
Obama Administration 2,294
Political Development 494
Economics 94
Author
People
Media Type
Article Text
Issue 
<div class="filter-dropdown">
  <h2 class="browse-filter-label browse-rail-filter-dropdown">Filters  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="31.1 741 937.8 610.1" enable-background="new 31.1 741 937.8 610.1" xml:space="preserve">
<g>
	<polygon points="500,1351.1 31.1,882.1 52.3,741 500,1188.7 947.7,741 968.9,882.1 	"/>
</g>
</svg>
</h2>
  <div class="browse-filters">

    <!-- REGIONS -->
    <div class="tag-section has-filters">
      <div class="browse-filters-category"><a href="#">Region <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="6.1 563.4 993.8 986.6" enable-background="new 6.1 563.4 993.8 986.6" xml:space="preserve">
<path d="M745.1,1034.6H520.1V809.8c0-10.9-7.3-18.2-18.2-18.2c-10.9,0-18.2,7.3-18.2,18.2v224.8H259.1c-10.9,0-18.2,7.3-18.2,18.2
	c0,10.9,7.3,18.2,18.2,18.2h224.8v224.8c0,7.3,7.3,14.5,18.2,14.5c10.9,0,18.2-7.3,18.2-18.2v-224.8h224.8
	c10.8,0,18.2-7.3,18.2-18.2C763.2,1042,752.2,1034.6,745.1,1034.6z M502,570.4c-268.3,0-485.9,214-485.9,482.3
	c0,264.8,217.6,482.4,485.9,482.4s485.9-214,485.9-482.4C988,788,770.4,570.4,502,570.4z M502,1498.9
	c-250.2,0-449.7-199.4-449.7-446.1S255.5,606.7,502,606.7c250.2,0,449.7,199.4,449.7,446.1S748.6,1498.9,502,1498.9z"/>
</svg>
</a></div>

      <div class="browse-filters-category__selection is-active">
        <a href="">United States <span>2,318</span> <span class="remove-selection-icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="6.1 563.4 993.8 986.6" enable-background="new 6.1 563.4 993.8 986.6" xml:space="preserve">
<path d="M745.1,1034.6H520.1V809.8c0-10.9-7.3-18.2-18.2-18.2c-10.9,0-18.2,7.3-18.2,18.2v224.8H259.1c-10.9,0-18.2,7.3-18.2,18.2
	c0,10.9,7.3,18.2,18.2,18.2h224.8v224.8c0,7.3,7.3,14.5,18.2,14.5c10.9,0,18.2-7.3,18.2-18.2v-224.8h224.8
	c10.8,0,18.2-7.3,18.2-18.2C763.2,1042,752.2,1034.6,745.1,1034.6z M502,570.4c-268.3,0-485.9,214-485.9,482.3
	c0,264.8,217.6,482.4,485.9,482.4s485.9-214,485.9-482.4C988,788,770.4,570.4,502,570.4z M502,1498.9
	c-250.2,0-449.7-199.4-449.7-446.1S255.5,606.7,502,606.7c250.2,0,449.7,199.4,449.7,446.1S748.6,1498.9,502,1498.9z"/>
</svg>
</span></a>
      </div>


      <div class="browse-filters-category__selection">
        <a href="#">Middle East <span>2,294</span></a>
      </div>


      <div class="browse-filters-category__selection">
        <a href="#">Europe <span>494</span></a>
      </div>

      <div class="browse-filters-category__selection">
        <a href="#">East Africa <span>94</span></a>
      </div>
    </div>

    <!-- TOPICS -->
    <div class="tag-section is-open">
      <div class="browse-filters-category"><a href="#">Topic <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="6.1 563.4 993.8 986.6" enable-background="new 6.1 563.4 993.8 986.6" xml:space="preserve">
<path d="M745.1,1034.6H520.1V809.8c0-10.9-7.3-18.2-18.2-18.2c-10.9,0-18.2,7.3-18.2,18.2v224.8H259.1c-10.9,0-18.2,7.3-18.2,18.2
	c0,10.9,7.3,18.2,18.2,18.2h224.8v224.8c0,7.3,7.3,14.5,18.2,14.5c10.9,0,18.2-7.3,18.2-18.2v-224.8h224.8
	c10.8,0,18.2-7.3,18.2-18.2C763.2,1042,752.2,1034.6,745.1,1034.6z M502,570.4c-268.3,0-485.9,214-485.9,482.3
	c0,264.8,217.6,482.4,485.9,482.4s485.9-214,485.9-482.4C988,788,770.4,570.4,502,570.4z M502,1498.9
	c-250.2,0-449.7-199.4-449.7-446.1S255.5,606.7,502,606.7c250.2,0,449.7,199.4,449.7,446.1S748.6,1498.9,502,1498.9z"/>
</svg>
</a></div>

      <div class="browse-filters-category__selection is-active">
        <a href="">U.S. Policy <span>2,318</span> <span class="remove-selection-icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="6.1 563.4 993.8 986.6" enable-background="new 6.1 563.4 993.8 986.6" xml:space="preserve">
<path d="M745.1,1034.6H520.1V809.8c0-10.9-7.3-18.2-18.2-18.2c-10.9,0-18.2,7.3-18.2,18.2v224.8H259.1c-10.9,0-18.2,7.3-18.2,18.2
	c0,10.9,7.3,18.2,18.2,18.2h224.8v224.8c0,7.3,7.3,14.5,18.2,14.5c10.9,0,18.2-7.3,18.2-18.2v-224.8h224.8
	c10.8,0,18.2-7.3,18.2-18.2C763.2,1042,752.2,1034.6,745.1,1034.6z M502,570.4c-268.3,0-485.9,214-485.9,482.3
	c0,264.8,217.6,482.4,485.9,482.4s485.9-214,485.9-482.4C988,788,770.4,570.4,502,570.4z M502,1498.9
	c-250.2,0-449.7-199.4-449.7-446.1S255.5,606.7,502,606.7c250.2,0,449.7,199.4,449.7,446.1S748.6,1498.9,502,1498.9z"/>
</svg>
</span></a>
      </div>


      <div class="browse-filters-category__selection">
        <a href="#">Obama Administration <span>2,294</span></a>
      </div>


      <div class="browse-filters-category__selection">
        <a href="#">Political Development <span>494</span></a>
      </div>

      <div class="browse-filters-category__selection">
        <a href="#">Economics <span>94</span></a>
      </div>
    </div>

    <div class="tag-section">
      <div class="browse-filters-category empty"> <a href="#"> Author <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="6.1 563.4 993.8 986.6" enable-background="new 6.1 563.4 993.8 986.6" xml:space="preserve">
<path d="M745.1,1034.6H520.1V809.8c0-10.9-7.3-18.2-18.2-18.2c-10.9,0-18.2,7.3-18.2,18.2v224.8H259.1c-10.9,0-18.2,7.3-18.2,18.2
	c0,10.9,7.3,18.2,18.2,18.2h224.8v224.8c0,7.3,7.3,14.5,18.2,14.5c10.9,0,18.2-7.3,18.2-18.2v-224.8h224.8
	c10.8,0,18.2-7.3,18.2-18.2C763.2,1042,752.2,1034.6,745.1,1034.6z M502,570.4c-268.3,0-485.9,214-485.9,482.3
	c0,264.8,217.6,482.4,485.9,482.4s485.9-214,485.9-482.4C988,788,770.4,570.4,502,570.4z M502,1498.9
	c-250.2,0-449.7-199.4-449.7-446.1S255.5,606.7,502,606.7c250.2,0,449.7,199.4,449.7,446.1S748.6,1498.9,502,1498.9z"/>
</svg>
</a></div>
    </div>

    <div class="tag-section">
      <div class="browse-filters-category empty"> <a href="#"> People <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="6.1 563.4 993.8 986.6" enable-background="new 6.1 563.4 993.8 986.6" xml:space="preserve">
<path d="M745.1,1034.6H520.1V809.8c0-10.9-7.3-18.2-18.2-18.2c-10.9,0-18.2,7.3-18.2,18.2v224.8H259.1c-10.9,0-18.2,7.3-18.2,18.2
	c0,10.9,7.3,18.2,18.2,18.2h224.8v224.8c0,7.3,7.3,14.5,18.2,14.5c10.9,0,18.2-7.3,18.2-18.2v-224.8h224.8
	c10.8,0,18.2-7.3,18.2-18.2C763.2,1042,752.2,1034.6,745.1,1034.6z M502,570.4c-268.3,0-485.9,214-485.9,482.3
	c0,264.8,217.6,482.4,485.9,482.4s485.9-214,485.9-482.4C988,788,770.4,570.4,502,570.4z M502,1498.9
	c-250.2,0-449.7-199.4-449.7-446.1S255.5,606.7,502,606.7c250.2,0,449.7,199.4,449.7,446.1S748.6,1498.9,502,1498.9z"/>
</svg>
</a></div>
    </div>

    <div class="tag-section">
      <div class="browse-filters-category empty"> <a href="#"> Media Type <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="6.1 563.4 993.8 986.6" enable-background="new 6.1 563.4 993.8 986.6" xml:space="preserve">
<path d="M745.1,1034.6H520.1V809.8c0-10.9-7.3-18.2-18.2-18.2c-10.9,0-18.2,7.3-18.2,18.2v224.8H259.1c-10.9,0-18.2,7.3-18.2,18.2
	c0,10.9,7.3,18.2,18.2,18.2h224.8v224.8c0,7.3,7.3,14.5,18.2,14.5c10.9,0,18.2-7.3,18.2-18.2v-224.8h224.8
	c10.8,0,18.2-7.3,18.2-18.2C763.2,1042,752.2,1034.6,745.1,1034.6z M502,570.4c-268.3,0-485.9,214-485.9,482.3
	c0,264.8,217.6,482.4,485.9,482.4s485.9-214,485.9-482.4C988,788,770.4,570.4,502,570.4z M502,1498.9
	c-250.2,0-449.7-199.4-449.7-446.1S255.5,606.7,502,606.7c250.2,0,449.7,199.4,449.7,446.1S748.6,1498.9,502,1498.9z"/>
</svg>
</a></div>
    </div>

    <div class="tag-section">
      <div class="browse-filters-category empty"> <a href="#"> Article Text <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="6.1 563.4 993.8 986.6" enable-background="new 6.1 563.4 993.8 986.6" xml:space="preserve">
<path d="M745.1,1034.6H520.1V809.8c0-10.9-7.3-18.2-18.2-18.2c-10.9,0-18.2,7.3-18.2,18.2v224.8H259.1c-10.9,0-18.2,7.3-18.2,18.2
	c0,10.9,7.3,18.2,18.2,18.2h224.8v224.8c0,7.3,7.3,14.5,18.2,14.5c10.9,0,18.2-7.3,18.2-18.2v-224.8h224.8
	c10.8,0,18.2-7.3,18.2-18.2C763.2,1042,752.2,1034.6,745.1,1034.6z M502,570.4c-268.3,0-485.9,214-485.9,482.3
	c0,264.8,217.6,482.4,485.9,482.4s485.9-214,485.9-482.4C988,788,770.4,570.4,502,570.4z M502,1498.9
	c-250.2,0-449.7-199.4-449.7-446.1S255.5,606.7,502,606.7c250.2,0,449.7,199.4,449.7,446.1S748.6,1498.9,502,1498.9z"/>
</svg>
</a></div>
     </div>

    <div class="tag-section">
      <div class="browse-filters-category empty"> <a href="#"> Issue <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="6.1 563.4 993.8 986.6" enable-background="new 6.1 563.4 993.8 986.6" xml:space="preserve">
<path d="M745.1,1034.6H520.1V809.8c0-10.9-7.3-18.2-18.2-18.2c-10.9,0-18.2,7.3-18.2,18.2v224.8H259.1c-10.9,0-18.2,7.3-18.2,18.2
	c0,10.9,7.3,18.2,18.2,18.2h224.8v224.8c0,7.3,7.3,14.5,18.2,14.5c10.9,0,18.2-7.3,18.2-18.2v-224.8h224.8
	c10.8,0,18.2-7.3,18.2-18.2C763.2,1042,752.2,1034.6,745.1,1034.6z M502,570.4c-268.3,0-485.9,214-485.9,482.3
	c0,264.8,217.6,482.4,485.9,482.4s485.9-214,485.9-482.4C988,788,770.4,570.4,502,570.4z M502,1498.9
	c-250.2,0-449.7-199.4-449.7-446.1S255.5,606.7,502,606.7c250.2,0,449.7,199.4,449.7,446.1S748.6,1498.9,502,1498.9z"/>
</svg>
</a></div>
    </div>

    <a class="browse-filters-category--close" href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="6.1 563.4 993.8 986.6" enable-background="new 6.1 563.4 993.8 986.6" xml:space="preserve">
<path d="M745.1,1034.6H520.1V809.8c0-10.9-7.3-18.2-18.2-18.2c-10.9,0-18.2,7.3-18.2,18.2v224.8H259.1c-10.9,0-18.2,7.3-18.2,18.2
	c0,10.9,7.3,18.2,18.2,18.2h224.8v224.8c0,7.3,7.3,14.5,18.2,14.5c10.9,0,18.2-7.3,18.2-18.2v-224.8h224.8
	c10.8,0,18.2-7.3,18.2-18.2C763.2,1042,752.2,1034.6,745.1,1034.6z M502,570.4c-268.3,0-485.9,214-485.9,482.3
	c0,264.8,217.6,482.4,485.9,482.4s485.9-214,485.9-482.4C988,788,770.4,570.4,502,570.4z M502,1498.9
	c-250.2,0-449.7-199.4-449.7-446.1S255.5,606.7,502,606.7c250.2,0,449.7,199.4,449.7,446.1S748.6,1498.9,502,1498.9z"/>
</svg>
</a>
  </div>
</div>