_section_selection.html

<div class="b-page-section m-no-bottom-padding">
  <div class="row m-center">
    <ul class="tabs" data-tabs id="explore-tabs">
      <li class="tabs-title is-active" id="sector-tab"><a href="#panel1">Sector</a></li>
      <li class="tabs-title" id="impact-tab"><a href="#panel2">Impact</a></li>
      <li class="tabs-title" id="map-tab"><a href="#panel3">Map</a></li>
      <!-- <a href="#" class="e-side-link">Download all case studies</a> -->
    </ul>
  </div>
  <div class="tabs-content" data-tabs-content="explore-tabs" id="explore-content">
    <div class="tabs-panel is-active" id="panel1">
      <div class="row">
        <div class="large-2 columns">
          <a href="#" class="b-button js-filter" data-filter="*" id="see-all-btn">
            See All
          </a>
        </div>
        <div class="large-2 columns">
          <a href="#" class="b-button js-filter" data-filter="sector-business">
            Business
          </a>
        </div>
        <div class="large-2 columns">
          <a href="#" class="b-button js-filter" data-filter="sector-education">
            <!-- <i class="material-icons m-lg">school</i> -->
            Education
          </a>
        </div>
        <div class="large-2 columns">
          <a href="#" class="b-button js-filter" data-filter="sector-emergency">
            Emergency Services
          </a>
        </div>
        <div class="large-2 columns">
          <a href="#" class="b-button js-filter" data-filter="sector-geospatial">
            <!-- <i class="material-icons m-lg">add_location</i> -->
            Geospatial Services
          </a>
        </div>
        <div class="large-2 columns">
          <a href="#" class="b-button js-filter" data-filter="sector-health">
            <!-- <i class="material-icons m-lg">healing</i> -->
            Health
          </a>
        </div>

      </div>

      <div class="row">

        <div class="large-2 columns">
          <a href="#" class="b-button js-filter" data-filter="sector-law">
            Law
          </a>
        </div>
        <div class="large-2 columns">
          <a href="#" class="b-button js-filter" data-filter="sector-philantropy">
            <!-- <i class="material-icons m-lg">accessibility</i> -->
            Philantropy &amp; Aid
          </a>
        </div>
        <div class="large-2 columns">
          <a href="#" class="b-button js-filter" data-filter="sector-politics">
            <!-- <i class="material-icons m-lg">done</i> -->
            Politics &amp; Elections
          </a>
        </div>
        <div class="large-2 columns">
          <a href="#" class="b-button js-filter" data-filter="sector-public">
            <!-- <i class="material-icons m-lg">domain</i> -->
            Public Sector
          </a>
        </div>

        <div class="large-2 columns">
          <a href="#" class="b-button js-filter" data-filter="sector-transportation">
            Transportation
          </a>
        </div>

        <div class="large-2 columns">
          <a href="#" class="b-button js-filter" data-filter="sector-weather">
            Weather
          </a>
        </div>
      </div>
    </div>
    <div class="tabs-panel" id="panel2">
      <div class="row">
        <div class="medium-2 large-offset-1 columns">
          <a href="#" class="b-button js-filter" data-filter="*" id="see-all-btn-2">
            See All
          </a>
        </div>
        <div class="medium-2 columns">
          <a href="#" class="b-button js-filter" id="government-filter" data-filter="impact-government">
            <!-- <i class="material-icons m-lg">account_balance</i> -->
            Improving Government
          </a>
        </div>
        <div class="medium-2 columns">
          <a href="#" class="b-button js-filter" id="citizens-filter" data-filter="impact-citizens">
            <!-- <i class="material-icons m-lg">person_pin</i> -->
            Empowering Citizens
          </a>
        </div>
        <div class="medium-2 columns">
          <a href="#" class="b-button js-filter" id="economic-filter" data-filter="impact-economic">
            <!-- <i class="material-icons m-lg">trending_up</i> -->
            Creating Opportunity
          </a>
        </div>
        <div class="medium-2 columns end">
          <a href="#" class="b-button js-filter" id="public-filter" data-filter="impact-public">
            <!-- <i class="material-icons m-lg">public</i> -->
            Solving Public Problems
          </a>
        </div>
      </div>
    </div>
    <div class="tabs-panel" id="panel3">
      <div class="expanded row m-center">
        <div class="map"></div>
        <div class="map-caption default">Select a Region</div>
        <div class="map-alt">
          <div class="row">
            <div class="medium-2 large-offset-1 columns">
              <a href="#" class="b-button js-filter" data-filter="*" id="see-all-btn-3">
                See All
              </a>
            </div>
            <div class="medium-2 columns">
              <a href="#" class="b-button js-filter" data-filter="region-northAmerica">
                North America
              </a>
            </div>
            <div class="medium-2 columns">
              <a href="#" class="b-button js-filter" data-filter="region-westEurope">
                West Europe
              </a>
            </div>
            <div class="medium-2 columns">
              <a href="#" class="b-button js-filter" data-filter="region-eastAsia">
                East Asia &amp; Pacific
              </a>
            </div>
            <div class="medium-2 columns">
              <a href="#" class="b-button js-filter" data-filter="region-subSaharanAfrica">
                Sub-Saharan Africa
              </a>
            </div>
            <div class="medium-2 columns">
              <a href="#" class="b-button js-filter" data-filter="region-latinAmerica">
                Latin America
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>