Icon button panels

Map button panels

Found in the hero ribbon of the Case studies landing page, this isn’t currently an easily portable component. However, it might be handy in other contexts down the road, as a graphical navigation device.

<div class="NOTSURE">(scroll to see example)</div>

<div is="eiti-tooltip-wrapper" class="state svg-container map-container wide" style="padding-bottom: 60.15169270833333%;">
    <svg class="states map case_studies  no-outlines " viewBox="22 60 936 525">
<g class="case-studies-points">
    <g class="case-studies-circle-group">
      <g class="case-studies-caption ">
        <a href="#" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#">
            <rect x="164" y="444" width="205" height="87"></rect>
          <text x="164" y="449">Link label</text>
        </a>
          <text class="case-studies-description" x="164" y="469">
            Description text
          </text>
      </g>
      <circle cx="185" cy="465" r="21" fill="#fff" stroke="#323c42" stroke-width="2px"></circle>
      <!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<svg x="164" y="444" width="40px" height="40px" viewBox="1 1 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-332.000000, -388.000000)">
            <g id="Group-2" transform="translate(332.000000, 388.000000)">
                <use id="Oval" stroke="#323C42" mask="url(#mask-2)" stroke-width="3" fill="#FFFFFF" xlink:href="#path-1"></use>
                <path d="M15.7846253,24.2306359 L16.0855443,20.7238303 L16.4235433,20.7238303 C16.6980784,20.7238303 16.9276895,20.5126801 16.9490819,20.2387555 L17.5594767,12.7343627 L19.1674679,13.2629516 L19.7307996,20.2380421 C19.7521919,20.5126801 19.9818031,20.7238303 20.2570512,20.7238303 L20.5936241,20.7238303 L20.8952561,24.2306359 L15.7846253,24.2306359 M23.9992851,18.7714042 L23.7910663,18.702923 L25.138784,14.6026141 L25.1402101,14.5990474 L25.1409232,14.596194 L26.4772316,10.5301257 L26.6747542,10.5950401 L26.7375051,10.6563878 L27.448444,13.6695585 C27.4691232,13.7551599 27.4605663,13.9527565 27.4334693,14.0355046 L26.6391003,16.4480385 C26.6112903,16.5329266 26.5021893,16.6955693 26.4330207,16.7533503 L24.0834284,18.7500038 L23.9999982,18.7685508 L23.9992851,18.7714042 M10.5698851,9.27820467 C10.3474047,9.27820467 10.1413252,9.4187337 10.0678781,9.6405841 C9.98943952,9.88098147 10.0978274,10.1277989 10.3060462,10.2526344 L10.3060462,20.3550308 C10.1498821,20.446339 10.0422073,20.6082684 10.0422073,20.8015849 L10.0422073,24.7599381 L10.0429204,24.7699249 L7.54001621,24.7699249 C7.3938352,24.7699249 7.27617731,24.8869136 7.27617731,25.0338627 C7.27617731,25.1800985 7.39454828,25.2978005 7.54072929,25.2978005 L13.6496695,25.2978005 C13.7958505,25.2978005 13.9142214,25.1800985 13.9142214,25.0338627 C13.9142214,24.8876269 13.7958505,24.7699249 13.6496695,24.7699249 L11.0961367,24.7699249 L11.0975629,24.7599381 L11.0975629,20.8015849 C11.0975629,20.6089817 10.989175,20.446339 10.8344371,20.3550308 L10.8344371,10.4488043 L16.5326443,12.3234758 L15.9357979,19.6673659 L15.6006512,19.6673659 C15.3268292,19.6673659 15.0979311,19.8778028 15.0743995,20.151014 L14.6836327,24.714284 C14.6707973,24.8619465 14.7199997,25.0074689 14.8212568,25.1173241 C14.9203747,25.2257526 15.0615641,25.288527 15.2105974,25.288527 L21.4799802,25.288527 C21.7723422,25.288527 22.0083711,25.0516963 22.0083711,24.7599381 L21.9869787,24.6101356 L21.6047689,20.151014 C21.5812373,19.8778028 21.3523392,19.6673659 21.0778041,19.6673659 L20.7440836,19.6673659 L20.2506335,13.5468631 L23.9721882,14.7709636 L22.72858,18.5524072 C22.6565591,18.7721175 22.6750991,19.0075215 22.7792085,19.2143916 C22.884031,19.4219751 23.0623005,19.5760577 23.2833547,19.6473922 L23.6698431,19.7743677 C23.7725263,19.8078949 23.8823403,19.8250152 23.9999982,19.8250152 C24.2802379,19.8250152 24.5633299,19.7265735 24.7580003,19.5625041 L27.1161496,17.5601438 C27.3314992,17.3768141 27.5525534,17.0486752 27.6424012,16.7783173 L28.4374833,14.3629301 C28.5251919,14.0911455 28.5401666,13.6973789 28.4759895,13.424881 L27.7650506,10.4145638 C27.6809074,10.0550377 27.3650138,9.71120528 27.0141794,9.59493 L26.6298303,9.47009456 C26.5435478,9.44084741 26.4544131,9.4265805 26.3659914,9.4265805 C26.0016085,9.4265805 25.6493479,9.66412449 25.53169,10.0229372 L24.3016303,13.7665734 L10.7353192,9.30459845 C10.6804122,9.28676482 10.6247921,9.27820467 10.5698851,9.27820467" id="Fill-1" fill="#587F4C"></path>
                <path d="M28.4759895,13.424881 L27.7650506,10.4145638 C27.6809074,10.0550377 27.3657269,9.71120528 27.0141794,9.59493 L26.6298303,9.47009456 C26.1855826,9.3195787 25.677871,9.57709636 25.53169,10.0229372 L24.3016303,13.7665734 L10.7353192,9.30459845 C10.4572188,9.2140036 10.1591521,9.36380611 10.0678781,9.6405841 C9.98943952,9.88098147 10.0978274,10.1277989 10.3060462,10.2526344 L10.3060462,20.3550308 C10.1498821,20.446339 10.0422073,20.6082684 10.0422073,20.8015849 L10.0422073,24.7599381 L10.0429204,24.7699249 L7.54001621,24.7699249 C7.39454828,24.7699249 7.27617731,24.8869136 7.27617731,25.0338627 C7.27617731,25.1800985 7.39454828,25.2978005 7.54072929,25.2978005 L13.6496695,25.2978005 C13.7958505,25.2978005 13.9142214,25.1800985 13.9142214,25.0338627 C13.9142214,24.8876269 13.7958505,24.7699249 13.6496695,24.7699249 L11.0961367,24.7699249 L11.0975629,24.7599381 L11.0975629,20.8015849 C11.0975629,20.6089817 10.989175,20.446339 10.8344371,20.3550308 L10.8344371,10.4488043 L16.5333573,12.3234758 L15.9357979,19.6673659 L15.6006512,19.6673659 C15.3268292,19.6673659 15.0979311,19.8778028 15.0743995,20.151014 L14.6836327,24.714284 C14.6707973,24.8619465 14.7199997,25.0074689 14.8205437,25.1173241 C14.9203747,25.2257526 15.0615641,25.288527 15.2105974,25.288527 L21.4799802,25.288527 C21.7723422,25.288527 22.0083711,25.0516963 22.0083711,24.7599381 L21.9869787,24.6101356 L21.6047689,20.151014 C21.5812373,19.8778028 21.3523392,19.6673659 21.0778041,19.6673659 L20.7440836,19.6673659 L20.2506335,13.5468631 L23.9721882,14.7709636 L22.72858,18.5524072 C22.6565591,18.7721175 22.6750991,19.0075215 22.7792085,19.2143916 C22.884031,19.4219751 23.0623005,19.5760577 23.2833547,19.6473922 L23.6698431,19.7743677 C23.7725263,19.8078949 23.8823403,19.8250152 23.9999982,19.8250152 C24.2802379,19.8250152 24.5633299,19.7265735 24.7580003,19.5625041 L27.1161496,17.5601438 C27.3314992,17.3768141 27.5525534,17.0486752 27.6424012,16.7783173 L28.4374833,14.3629301 C28.5251919,14.0911455 28.5401666,13.6973789 28.4759895,13.424881 L28.4759895,13.424881 Z M20.5936241,20.7238303 L20.8952561,24.2306359 L15.7846253,24.2306359 L16.0855443,20.7238303 L16.4235433,20.7238303 C16.6980784,20.7238303 16.9276895,20.5126801 16.9490819,20.2387555 L17.5594767,12.7343627 L19.1674679,13.2629516 L19.7307996,20.2380421 C19.7521919,20.5126801 19.9818031,20.7238303 20.2570512,20.7238303 L20.5936241,20.7238303 L20.5936241,20.7238303 Z M27.4334693,14.0355046 L26.6391003,16.4480385 C26.6112903,16.5322132 26.5021893,16.6955693 26.4330207,16.7533503 L24.0834284,18.7500038 L23.9999982,18.7685508 L23.9992851,18.7714042 L23.7910663,18.702923 L25.138784,14.6026141 L25.1402101,14.5990474 L25.1409232,14.596194 L26.4772316,10.5301257 L26.6747542,10.5950401 L26.7375051,10.6563878 L27.448444,13.6695585 C27.4691232,13.7551599 27.4605663,13.9527565 27.4334693,14.0355046 L27.4334693,14.0355046 Z" id="Fill-2" fill="#323C42"></path>
            </g>
        </g>
    </g>
</svg>
</div>
<div class="{{ className }}">{{ text }}</div>

<div is="eiti-tooltip-wrapper" class="state svg-container map-container wide" style="padding-bottom: 60.15169270833333%;">
  <svg class="states map case_studies  no-outlines " viewBox="22 60 936 525">
<g class="case-studies-points">
    <g class="case-studies-circle-group">
      <g class="case-studies-caption ">
        <a href="#" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#">
            <rect x="164" y="444" width="205" height="87"></rect>
          <text x="164" y="449">Link label</text>
        </a>
          <text class="case-studies-description" x="164" y="469">
            Description text
          </text>
      </g>
      <circle cx="185" cy="465" r="21" fill="#fff" stroke="#323c42" stroke-width="2px"></circle>
      <!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<svg x="164" y="444" width="40px" height="40px" viewBox="1 1 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-332.000000, -388.000000)">
            <g id="Group-2" transform="translate(332.000000, 388.000000)">
                <use id="Oval" stroke="#323C42" mask="url(#mask-2)" stroke-width="3" fill="#FFFFFF" xlink:href="#path-1"></use>
                <path d="M15.7846253,24.2306359 L16.0855443,20.7238303 L16.4235433,20.7238303 C16.6980784,20.7238303 16.9276895,20.5126801 16.9490819,20.2387555 L17.5594767,12.7343627 L19.1674679,13.2629516 L19.7307996,20.2380421 C19.7521919,20.5126801 19.9818031,20.7238303 20.2570512,20.7238303 L20.5936241,20.7238303 L20.8952561,24.2306359 L15.7846253,24.2306359 M23.9992851,18.7714042 L23.7910663,18.702923 L25.138784,14.6026141 L25.1402101,14.5990474 L25.1409232,14.596194 L26.4772316,10.5301257 L26.6747542,10.5950401 L26.7375051,10.6563878 L27.448444,13.6695585 C27.4691232,13.7551599 27.4605663,13.9527565 27.4334693,14.0355046 L26.6391003,16.4480385 C26.6112903,16.5329266 26.5021893,16.6955693 26.4330207,16.7533503 L24.0834284,18.7500038 L23.9999982,18.7685508 L23.9992851,18.7714042 M10.5698851,9.27820467 C10.3474047,9.27820467 10.1413252,9.4187337 10.0678781,9.6405841 C9.98943952,9.88098147 10.0978274,10.1277989 10.3060462,10.2526344 L10.3060462,20.3550308 C10.1498821,20.446339 10.0422073,20.6082684 10.0422073,20.8015849 L10.0422073,24.7599381 L10.0429204,24.7699249 L7.54001621,24.7699249 C7.3938352,24.7699249 7.27617731,24.8869136 7.27617731,25.0338627 C7.27617731,25.1800985 7.39454828,25.2978005 7.54072929,25.2978005 L13.6496695,25.2978005 C13.7958505,25.2978005 13.9142214,25.1800985 13.9142214,25.0338627 C13.9142214,24.8876269 13.7958505,24.7699249 13.6496695,24.7699249 L11.0961367,24.7699249 L11.0975629,24.7599381 L11.0975629,20.8015849 C11.0975629,20.6089817 10.989175,20.446339 10.8344371,20.3550308 L10.8344371,10.4488043 L16.5326443,12.3234758 L15.9357979,19.6673659 L15.6006512,19.6673659 C15.3268292,19.6673659 15.0979311,19.8778028 15.0743995,20.151014 L14.6836327,24.714284 C14.6707973,24.8619465 14.7199997,25.0074689 14.8212568,25.1173241 C14.9203747,25.2257526 15.0615641,25.288527 15.2105974,25.288527 L21.4799802,25.288527 C21.7723422,25.288527 22.0083711,25.0516963 22.0083711,24.7599381 L21.9869787,24.6101356 L21.6047689,20.151014 C21.5812373,19.8778028 21.3523392,19.6673659 21.0778041,19.6673659 L20.7440836,19.6673659 L20.2506335,13.5468631 L23.9721882,14.7709636 L22.72858,18.5524072 C22.6565591,18.7721175 22.6750991,19.0075215 22.7792085,19.2143916 C22.884031,19.4219751 23.0623005,19.5760577 23.2833547,19.6473922 L23.6698431,19.7743677 C23.7725263,19.8078949 23.8823403,19.8250152 23.9999982,19.8250152 C24.2802379,19.8250152 24.5633299,19.7265735 24.7580003,19.5625041 L27.1161496,17.5601438 C27.3314992,17.3768141 27.5525534,17.0486752 27.6424012,16.7783173 L28.4374833,14.3629301 C28.5251919,14.0911455 28.5401666,13.6973789 28.4759895,13.424881 L27.7650506,10.4145638 C27.6809074,10.0550377 27.3650138,9.71120528 27.0141794,9.59493 L26.6298303,9.47009456 C26.5435478,9.44084741 26.4544131,9.4265805 26.3659914,9.4265805 C26.0016085,9.4265805 25.6493479,9.66412449 25.53169,10.0229372 L24.3016303,13.7665734 L10.7353192,9.30459845 C10.6804122,9.28676482 10.6247921,9.27820467 10.5698851,9.27820467" id="Fill-1" fill="#587F4C"></path>
                <path d="M28.4759895,13.424881 L27.7650506,10.4145638 C27.6809074,10.0550377 27.3657269,9.71120528 27.0141794,9.59493 L26.6298303,9.47009456 C26.1855826,9.3195787 25.677871,9.57709636 25.53169,10.0229372 L24.3016303,13.7665734 L10.7353192,9.30459845 C10.4572188,9.2140036 10.1591521,9.36380611 10.0678781,9.6405841 C9.98943952,9.88098147 10.0978274,10.1277989 10.3060462,10.2526344 L10.3060462,20.3550308 C10.1498821,20.446339 10.0422073,20.6082684 10.0422073,20.8015849 L10.0422073,24.7599381 L10.0429204,24.7699249 L7.54001621,24.7699249 C7.39454828,24.7699249 7.27617731,24.8869136 7.27617731,25.0338627 C7.27617731,25.1800985 7.39454828,25.2978005 7.54072929,25.2978005 L13.6496695,25.2978005 C13.7958505,25.2978005 13.9142214,25.1800985 13.9142214,25.0338627 C13.9142214,24.8876269 13.7958505,24.7699249 13.6496695,24.7699249 L11.0961367,24.7699249 L11.0975629,24.7599381 L11.0975629,20.8015849 C11.0975629,20.6089817 10.989175,20.446339 10.8344371,20.3550308 L10.8344371,10.4488043 L16.5333573,12.3234758 L15.9357979,19.6673659 L15.6006512,19.6673659 C15.3268292,19.6673659 15.0979311,19.8778028 15.0743995,20.151014 L14.6836327,24.714284 C14.6707973,24.8619465 14.7199997,25.0074689 14.8205437,25.1173241 C14.9203747,25.2257526 15.0615641,25.288527 15.2105974,25.288527 L21.4799802,25.288527 C21.7723422,25.288527 22.0083711,25.0516963 22.0083711,24.7599381 L21.9869787,24.6101356 L21.6047689,20.151014 C21.5812373,19.8778028 21.3523392,19.6673659 21.0778041,19.6673659 L20.7440836,19.6673659 L20.2506335,13.5468631 L23.9721882,14.7709636 L22.72858,18.5524072 C22.6565591,18.7721175 22.6750991,19.0075215 22.7792085,19.2143916 C22.884031,19.4219751 23.0623005,19.5760577 23.2833547,19.6473922 L23.6698431,19.7743677 C23.7725263,19.8078949 23.8823403,19.8250152 23.9999982,19.8250152 C24.2802379,19.8250152 24.5633299,19.7265735 24.7580003,19.5625041 L27.1161496,17.5601438 C27.3314992,17.3768141 27.5525534,17.0486752 27.6424012,16.7783173 L28.4374833,14.3629301 C28.5251919,14.0911455 28.5401666,13.6973789 28.4759895,13.424881 L28.4759895,13.424881 Z M20.5936241,20.7238303 L20.8952561,24.2306359 L15.7846253,24.2306359 L16.0855443,20.7238303 L16.4235433,20.7238303 C16.6980784,20.7238303 16.9276895,20.5126801 16.9490819,20.2387555 L17.5594767,12.7343627 L19.1674679,13.2629516 L19.7307996,20.2380421 C19.7521919,20.5126801 19.9818031,20.7238303 20.2570512,20.7238303 L20.5936241,20.7238303 L20.5936241,20.7238303 Z M27.4334693,14.0355046 L26.6391003,16.4480385 C26.6112903,16.5322132 26.5021893,16.6955693 26.4330207,16.7533503 L24.0834284,18.7500038 L23.9999982,18.7685508 L23.9992851,18.7714042 L23.7910663,18.702923 L25.138784,14.6026141 L25.1402101,14.5990474 L25.1409232,14.596194 L26.4772316,10.5301257 L26.6747542,10.5950401 L26.7375051,10.6563878 L27.448444,13.6695585 C27.4691232,13.7551599 27.4605663,13.9527565 27.4334693,14.0355046 L27.4334693,14.0355046 Z" id="Fill-2" fill="#323C42"></path>
            </g>
        </g>
    </g>
</svg>
</div>
/* No context defined for this component. */
  • Handle: @map-button-panels
  • Preview:
  • Filesystem Path: components/components/map-button-panels/map-button-panels.hbs