index.html

---
layout: base
title: Home
current_menu: local
include_map: true
---
<section class="hub map local">
  <header class="banner">
    <h1 class="prime-title">Local Organizations</h1>

    <div class="filters">
      <div class="inner row">
        <a href="#" class="filters-toggle on">Filters</a>
        <div class="wrapper">
          <div class="impact-areas">
            <h2 class="hd-xs">Impact areas</h2>
            <ul>
              {% for imp in site.data.impact_areas %}
              <li><button class="filter {{ imp[1].class }}" data-filter-id="{{ imp[1].id }}" data-filter-type="impact_area">{{ imp[0] }}</button></li>
              {% endfor %}
            </ul>
          </div>
          <div class="keywords">
            <h2 class="hd-xs">Issues/Keywords</h2>
            <ul>
              {% for key in site.data.keywords %}
              <li><button class="filter" data-filter-id="{{ key[1].id }}" data-filter-type="keyword">{{ key[0] }}</button></li>
              {% endfor %}
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    <div class="row">
      <div class="geocoder">
        <form action="" method="post" accept-charset="utf-8">
          <input type="search" name="location" placeholder="Address or neighborhood" class="map-geocoder-input"/>
          <button type="submit" class="bttn bttn-l bttn-primary map-geocoder-search"><span class="visually-hidden">Search</span></button>
        </form>
        <a href="#" class="map-geocoder-locate"><span class="visually-hidden">Locate me</span></a>
      </div>
    </div>

  </header>
  <div class="content" id="local-orgs">
    <div id='map'><!-- Mapbox map --></div>
  </div>
</section>