hotspots

Done

HTML
View
Context
Assets
Info
Notes


        
        <section class="hotspots">
    <div class="hotspots__inner">
        <div class="hotspots__content">
            <picture class="hotspots__visual">
                <source media="(max-width: 749px)" srcset="/graphics/hotspots-mobile.png">
                <source media="(min-width: 750px)" srcset="/graphics/hotspots.png">
                <img src="/graphics/hotspots.png" alt="">
            </picture>

            <div class="hotspots__spots">
                <a class="hotspot" style="top: 20%; left: 40%;">
                    <span class="hotspot__trigger">
                        <span class="hotspot__trigger__inner">
                            <span class="hotspot__symbol">
                                <span class="icon-plus">
                                    <span class="icon-plus__inner"></span>
                                </span>
                            </span>
                        </span>
                    </span>

                    <span class="hotspot__bubble">
                        <span class="hotspot__visual">
                            <picture class="visual">
                                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
                                <img data-sizes="auto" data-src="[object Object]" class="lazyload" alt="">
                            </picture>

                        </span>

                        <span class="hotspot__content">
                            <span class="hotspot__close">
                                <span class="icon-cross">
                                    <span class="icon-cross__inner"></span>
                                </span>
                            </span>
                            <span class="hotspot__title p--2">Ut enim ad minim veniamLorem.</span>
                            <span class="hotspot__description caption">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem.</span>
                        </span>
                    </span>
                </a>

                <a class="hotspot" style="top: 40%; left: 70%;">
                    <span class="hotspot__trigger">
                        <span class="hotspot__trigger__inner">
                            <span class="hotspot__symbol">
                                <span class="icon-plus">
                                    <span class="icon-plus__inner"></span>
                                </span>
                            </span>
                        </span>
                    </span>

                    <span class="hotspot__bubble">
                        <span class="hotspot__visual">
                            <picture class="visual">
                                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
                                <img data-sizes="auto" data-src="[object Object]" class="lazyload" alt="">
                            </picture>

                        </span>

                        <span class="hotspot__content">
                            <span class="hotspot__close">
                                <span class="icon-cross">
                                    <span class="icon-cross__inner"></span>
                                </span>
                            </span>
                            <span class="hotspot__title p--2">Lorem ipsum dolor sit amet.</span>
                            <span class="hotspot__description caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem.</span>
                        </span>
                    </span>
                </a>

                <a class="hotspot" style="top: 80%; left: 30%;">
                    <span class="hotspot__trigger">
                        <span class="hotspot__trigger__inner">
                            <span class="hotspot__symbol">
                                <span class="icon-plus">
                                    <span class="icon-plus__inner"></span>
                                </span>
                            </span>
                        </span>
                    </span>

                    <span class="hotspot__bubble">
                        <span class="hotspot__visual">
                            <picture class="visual">
                                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
                                <img data-sizes="auto" data-src="[object Object]" class="lazyload" alt="">
                            </picture>

                        </span>

                        <span class="hotspot__content">
                            <span class="hotspot__close">
                                <span class="icon-cross">
                                    <span class="icon-cross__inner"></span>
                                </span>
                            </span>
                            <span class="hotspot__title p--2">Dolor sit amet.</span>
                            <span class="hotspot__description caption">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem.</span>
                        </span>
                    </span>
                </a>

            </div>
        </div>
    </div>
</section>


        <section class="hotspots">
  <div class="hotspots__inner">
    <div class="hotspots__content">
      <picture class="hotspots__visual">
        <source media="(max-width: 749px)" srcset="{{ visual.src.mobile }}">
        <source media="(min-width: 750px)" srcset="{{ visual.src.desktop }}">
        <img src="{{ visual.src.desktop }}" alt="{{ visual.alt }}">
      </picture>

      <div class="hotspots__spots">
        {{#each hotspots }}
        {{render '@hotspot' this merge=true }}
        {{/each}}
      </div>
    </div>
  </div>
</section>


        
            
            visual:
  src:
    mobile: /graphics/hotspots-mobile.png
    desktop: /graphics/hotspots.png
  alt: ''
hotspots:
  - position:
      top: 20%
      left: 40%
    visual:
      src:
        mobile: false
        desktop: /graphics/video-poster.jpg
      alt: ''
    title: Ut enim ad minim veniamLorem.
    description: >-
      Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniamLorem.
  - position:
      top: 40%
      left: 70%
    visual:
      src:
        mobile: false
        desktop: /graphics/video-player.jpg
      alt: ''
    title: Lorem ipsum dolor sit amet.
    description: >-
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniamLorem.
  - position:
      top: 80%
      left: 30%
    visual:
      src:
        mobile: false
        desktop: /graphics/video-poster.jpg
      alt: ''
    title: Dolor sit amet.
    description: >-
      Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
      ad minim veniamLorem.

File:

Content:
URL: /components/raw/hotspots/hotspots-back-mobile.png
Filesystem Path: ../src/04_organisms/hotspots/hotspots-back-mobile.png
Size: 137.4 KB

Content:
URL: /components/raw/hotspots/hotspots-back.png
Filesystem Path: ../src/04_organisms/hotspots/hotspots-back.png
Size: 113.9 KB

Content:
URL: /components/raw/hotspots/hotspots-mobile.png
Filesystem Path: ../src/04_organisms/hotspots/hotspots-mobile.png
Size: 143.7 KB

Content:
URL: /components/raw/hotspots/hotspots.png
Filesystem Path: ../src/04_organisms/hotspots/hotspots.png
Size: 600.2 KB

Content:


                                .hotspots {
  padding: 0 var(--gutter--bucket);

  .col-xs-12 {
    position: static;
  }
}

.hotspots__inner {
  max-width: var(--section--8);
  margin: 0 auto;

  @media (min-width: 750px) {
    padding: var(--gap--10) var(--gap--30);
    background-color: var(--color--neutrals-1);
  }

  @media (min-width: 900px) {
    padding: var(--gap--18) var(--gap--38);
  }
}

.hotspots__content {
  position: relative;
}

.hotspots__visual {
  display: block;
  width: 100%;

  img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

URL: /components/raw/hotspots/hotspots.scss
Filesystem Path: ../src/04_organisms/hotspots/hotspots.scss
Size: 563 Bytes

Handle: @hotspots
Preview:
- With layout
- Component only
Filesystem Path: ../src/04_organisms/hotspots/hotspots.hbs
References (1): @hotspot
Referenced by (3): @cdj-3000, @cdj-3000-out-of-stock, @onetrust

No notes defined.