Hotspots Stable

With Hotspots the user can explore content by opening detailed information on demand. They are placed as interactive spots on an image or graphic.

1. Feature XYZ
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn
2. Feature XYZ
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn
3. Feature XYZ
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn
4. Feature XYZ
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn

<div class="hotspots js-hotspots" data-show-tooltip="false" data-show-cover="true">
  <div class="hotspots__image-container">
    <img class="hotspots__image" src="https://www.healthcare.siemens.com/siemens_hwem-hwem_ssxa_websites-context-root/no-static/wcm/idc/resources/hwem_assets/mri/htmlApps/solahotspots006/assets/img/background-sola.jpg" alt="">
  </div>
  <ol class="list list--numbered hotspots__list">
    <li class="hotspots__item" data-x-position="45" data-y-position="22">
      <span class="font-weight-bold">Feature XYZ</span><br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn
    </li>
    <li class="hotspots__item" data-x-position="22" data-y-position="45">
      <span class="font-weight-bold">Feature XYZ</span><br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn
    </li>
    <li class="hotspots__item" data-x-position="66" data-y-position="33">
      <span class="font-weight-bold">Feature XYZ</span><br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn
    </li>
    <li class="hotspots__item" data-x-position="33" data-y-position="66">
      <span class="font-weight-bold">Feature XYZ</span><br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn
    </li>
  </ol>
</div>