OFRAG Frontend Components Library v0.0.0

Hero: Single Image Tooltip Map Without Button And Content And Title 

<div class="hero--without-autoplay">
                              <div class="hero__container">
                                  <div class="swiper">
                                      <div class="swiper-wrapper">
                                          <div class="swiper-slide">

                                              <div class="hero__item-container ">
                                                  <div class="hero__background  ">
                                                      <div class="image ">
                                                          <picture class="taggd">
                                                              <img src="/example-assets/images/image-tooltip-map/equipment.jpg" class="image__img image-tooltip-map__img is-loading" alt="Test" srcset="/example-assets/images/image-tooltip-map/equipment.jpg 1x, /example-assets/images/image-tooltip-map/equipment.jpg 2x" data-tooltip-info=[{&quot;top&quot;:30,&quot;left&quot;:62,&quot;data&quot;:[{&quot;name&quot;:&quot;Batterie&quot;,&quot;value&quot;:&quot;http://www.fuchs-movesa.ch&quot;}]},{&quot;top&quot;:70,&quot;left&quot;:67,&quot;data&quot;:[{&quot;name&quot;:&quot;Tachometer&quot;,&quot;value&quot;:&quot;http://www.fuchs-movesa.ch&quot;}]},{&quot;top&quot;:57,&quot;left&quot;:60,&quot;data&quot;:[{&quot;name&quot;:&quot;Motor&quot;,&quot;value&quot;:&quot;http://www.fuchs-movesa.ch&quot;}]}] onload="this.classList.remove('is-loading')" />
                                                          </picture>
                                                      </div>

                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                      <div class="hero__navigation-next"></div>
                                      <div class="hero__navigation-prev"></div>
                                      <div class="hero__pagination"></div>
                                  </div>
                              </div>
                          </div>
 
{% include '@SharedComponents/modules/bricks/components/hero/hero.twig' %}
 
{
  "items": [
    {
      "markerInfos": [
        {
          "top": 30,
          "left": 62,
          "data": [
            {
              "name": "Batterie",
              "value": "http://www.fuchs-movesa.ch"
            }
          ]
        },
        {
          "top": 70,
          "left": 67,
          "data": [
            {
              "name": "Tachometer",
              "value": "http://www.fuchs-movesa.ch"
            }
          ]
        },
        {
          "top": 57,
          "left": 60,
          "data": [
            {
              "name": "Motor",
              "value": "http://www.fuchs-movesa.ch"
            }
          ]
        }
      ],
      "image": {
        "alt": "Test",
        "src": "/example-assets/images/image-tooltip-map/equipment.jpg",
        "src2x": "/example-assets/images/image-tooltip-map/equipment.jpg"
      }
    }
  ]
}
  • Content: 
    import './hero.scss';
import Hero, {selector as sel} from 'cando-cx-components-library/components/modules/bricks/components/hero/hero';

export default Hero;
export const selector = sel;
  • URL: /components/raw/hero/hero.js
  • Filesystem Path: src/components/modules/bricks/components/hero/hero.js
  • Size: 186 Bytes
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/bricks/components/hero/hero";
  • URL: /components/raw/hero/hero.scss
  • Filesystem Path: src/components/modules/bricks/components/hero/hero.scss
  • Size: 110 Bytes

No notes defined.