<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__overlay-container             ">
                                                      <div class="hero__overlay 
         
        ">
                                                          <h3 class="hero__title">Durable<br>Super</h3>
                                                          <div class="hero__content">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
                                                          <div class="hero__button">
                                                              <a href="#" class="button--primary" data-is-initialized="true">Call to Action</a>
                                                          </div>
                                                      </div>
                                                  </div>
                                                  <div class="hero__background  ">
                                                      <div class="video-player">
                                                          <span class="visually-hidden">Test Title</span>
                                                          <p class="visually-hidden">Test Description</p>
                                                          <video class="video-player__video" preload="auto" playsinline autoplay muted data-config="{'controls':false,'autoplay':true,'muted':true,'loop':{'active':false}}" poster="/example-assets/images/hero/poster.jpg">
                                                              <source src="/example-assets/videos/hero/video.mp4" type="video/mp4">
                                                          </video>
                                                      </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' %}
{
  "headingLevel": 3,
  "items": [
    {
      "title": "Durable<br>Super",
      "content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
      "button": "<a href=\"#\" class=\"button--primary\" data-is-initialized=\"true\">Call to Action</a>",
      "video": {
        "title": "Test Title",
        "description": "Test Description",
        "mp4": "/example-assets/videos/hero/video.mp4",
        "poster": "/example-assets/images/hero/poster.jpg",
        "autoplay": true,
        "overlay": false,
        "controls": false,
        "loop": false
      }
    }
  ]
}
  • 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.