<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--right-aligned -with-content-background -top-aligned -box-layout" style="background: #FFF3E5">
<div class="hero__overlay--right-aligned
-box-layout
" style="background: #FFF3E5">
<h3 class="hero__title">Box Right</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">Call to Action</a>
</div>
</div>
</div>
<div class="hero__background -box-layout -right-aligned">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/background.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/background.jpg 1x, /example-assets/images/hero/background.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container ">
<div class="hero__overlay-container -with-content-background -top-aligned -box-layout" style="background: #FFF3E5">
<div class="hero__overlay
-box-layout
" style="background: #FFF3E5">
<h3 class="hero__title">Box Left</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">Call to Action</a>
</div>
</div>
</div>
<div class="hero__background -box-layout ">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/background.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/background.jpg 1x, /example-assets/images/hero/background.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container ">
<div class="hero__overlay-container -with-content-background -top-aligned -box-layout" style="background: #FFF3E5">
<div class="hero__overlay
-box-layout
" style="background: #FFF3E5">
<div class="hero__logo
">
<div class="logos">
<div class="image">
<picture>
<img class="image__img logos__brand--extra-large" alt="" title="" src="/example-assets/images/logos/brand-logo.png">
</picture>
</div>
</div>
</div>
<h3 class="hero__title">Box With Logo</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">Call to Action</a>
</div>
</div>
</div>
<div class="hero__background -box-layout ">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/background.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/background.jpg 1x, /example-assets/images/hero/background.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container ">
<div class="hero__overlay-container--right-aligned -with-content-background -top-aligned -box-layout" style="background: #002B46">
<div class="hero__overlay--right-aligned
-box-layout
" style="background: #002B46">
<div class="hero__logo
">
<div class="logos">
<div class="image">
<picture>
<img class="image__img logos__brand--extra-large" alt="" title="" src="/example-assets/images/logos/brand-logo.png">
</picture>
</div>
</div>
</div>
<h3 class="hero__title" style="color: #FFFFFF">White Text Right</h3>
<div class="hero__content" style="color: #FFFFFF">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
</div>
</div>
<div class="hero__background -box-layout -right-aligned">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/background.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/background.jpg 1x, /example-assets/images/hero/background.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container ">
<div class="hero__overlay-container -with-content-background -top-aligned -box-layout" style="background: #002B46">
<div class="hero__overlay
-box-layout
" style="background: #002B46">
<div class="hero__logo
">
<div class="logos">
<div class="image">
<picture>
<img class="image__img logos__brand--extra-large" alt="" title="" src="/example-assets/images/logos/brand-logo.png">
</picture>
</div>
</div>
</div>
<h3 class="hero__title" style="color: #FFFFFF">White Text Left</h3>
<div class="hero__content" style="color: #FFFFFF">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
</div>
</div>
<div class="hero__background -box-layout ">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/background.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/background.jpg 1x, /example-assets/images/hero/background.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container ">
<div class="hero__overlay-container -with-content-background -top-aligned -box-layout" style="background: #002B46">
<div class="hero__overlay
-box-layout
" style="background: #002B46">
<div class="hero__logo
">
<div class="logos">
<div class="image">
<picture>
<img class="image__img logos__brand--extra-large" alt="" title="" src="/example-assets/images/logos/brand-logo-fox.png">
</picture>
</div>
</div>
</div>
<h3 class="hero__title" style="color: #FFFFFF">White Text Second Logo</h3>
<div class="hero__content" style="color: #FFFFFF">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
</div>
</div>
<div class="hero__background -box-layout ">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/background.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/background.jpg 1x, /example-assets/images/hero/background.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container ">
<div class="hero__overlay-container--right-aligned -with-content-background -top-aligned -box-layout" style="background: #002B46">
<div class="hero__overlay--right-aligned
-box-layout
-with-logo-only" style="background: #002B46">
<div class="hero__logo
-enlarged-logo ">
<div class="logos">
<div class="image">
<picture>
<img class="image__img logos__brand--extra-large" alt="" title="" src="/example-assets/images/logos/brand-logo.png">
</picture>
</div>
</div>
</div>
</div>
</div>
<div class="hero__background -box-layout -right-aligned">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/background.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/background.jpg 1x, /example-assets/images/hero/background.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container ">
<div class="hero__overlay-container--right-aligned -with-content-background -top-aligned -box-layout" style="background: #000000">
<div class="hero__overlay--right-aligned
-box-layout
-with-logo-only" style="background: #000000">
<div class="hero__logo
-enlarged-logo ">
<div class="logos">
<div class="image">
<picture>
<img class="image__img logos__brand--extra-large" alt="" title="" src="/example-assets/images/logos/brand-logo-fox.png">
</picture>
</div>
</div>
</div>
</div>
</div>
<div class="hero__background -box-layout -right-aligned">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/background.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/background.jpg 1x, /example-assets/images/hero/background.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container ">
<div class="hero__overlay-container -with-content-background -top-aligned " style="background: #002B46">
<div class="hero__overlay
" style="background: #002B46">
<div class="hero__logo
">
<div class="logos">
<div class="image">
<picture>
<img class="image__img logos__brand--extra-large" alt="" title="" src="/example-assets/images/logos/brand-logo.png">
</picture>
</div>
</div>
</div>
<h3 class="hero__title" style="color: #FFFFFF">Floating Content Left</h3>
<div class="hero__content" style="color: #FFFFFF">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
<div class="hero__button">
<a href="#" class="button--primary">Call to Action</a>
</div>
</div>
</div>
<div class="hero__background ">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/background.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/background.jpg 1x, /example-assets/images/hero/background.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container ">
<div class="hero__overlay-container--right-aligned -with-content-background -top-aligned " style="background: #002B46">
<div class="hero__overlay--right-aligned
" style="background: #002B46">
<div class="hero__logo
">
<div class="logos">
<div class="image">
<picture>
<img class="image__img logos__brand--extra-large" alt="" title="" src="/example-assets/images/logos/brand-logo.png">
</picture>
</div>
</div>
</div>
<h3 class="hero__title" style="color: #FFFFFF">Floating Content Right</h3>
<div class="hero__content" style="color: #FFFFFF">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
<div class="hero__button">
<a href="#" class="button--primary">Call to Action</a>
</div>
</div>
</div>
<div class="hero__background -right-aligned">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/background.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/background.jpg 1x, /example-assets/images/hero/background.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container ">
<div class="hero__overlay-container -top-aligned ">
<div class="hero__overlay
-with-logo-only">
<div class="hero__logo
-highlighted-logo ">
<div class="logos">
<div class="image">
<picture>
<img class="image__img logos__brand--extra-large" alt="" title="" src="/example-assets/images/logos/brand-logo.png">
</picture>
</div>
</div>
</div>
</div>
</div>
<div class="hero__background ">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/background.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/background.jpg 1x, /example-assets/images/hero/background.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container ">
<div class="hero__overlay-container -top-aligned ">
<div class="hero__overlay
-with-logo-only">
<div class="hero__logo
-highlighted-logo ">
<div class="logos">
<div class="image">
<picture>
<img class="image__img logos__brand--extra-large" alt="" title="" src="/example-assets/images/logos/brand-logo-fox.png">
</picture>
</div>
</div>
</div>
</div>
</div>
<div class="hero__background ">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/background.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/background.jpg 1x, /example-assets/images/hero/background.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container ">
<div class="hero__overlay-container--right-aligned -top-aligned ">
<div class="hero__overlay--right-aligned
-with-logo-only">
<div class="hero__logo
-highlighted-logo ">
<div class="logos">
<div class="image">
<picture>
<img class="image__img logos__brand--extra-large" alt="" title="" src="/example-assets/images/logos/brand-logo-fox.png">
</picture>
</div>
</div>
</div>
</div>
</div>
<div class="hero__background -right-aligned">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/background.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/background.jpg 1x, /example-assets/images/hero/background.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<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">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 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">Call to Action</a>
</div>
</div>
</div>
<div class="hero__background ">
<div class="video-player">
<div class="video-player__video" data-plyr-provider="vimeo" data-plyr-embed-id="160142207" data-config="{'controls':false,'autoplay':true,'muted':true,'loop':{'active':false},'vimeo':{'muted':true,'background':true,'transparent':true}}"></div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container ">
<div class="hero__background ">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/image.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/image.jpg 1x, /example-assets/images/hero/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container " style="background: linear-gradient(#6cd7c1, #67e8db)">
<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,
"autoplay": false,
"innerWidth": false,
"items": [
{
"title": "Box Right",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"isTopAligned": true,
"isBoxLayout": true,
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Call to Action"
},
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/background.jpg",
"src2x": "/example-assets/images/hero/background.jpg"
},
"contentBackground": "#FFF3E5",
"isRightAligned": true
},
{
"title": "Box Left",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"isTopAligned": true,
"isBoxLayout": true,
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Call to Action"
},
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/background.jpg",
"src2x": "/example-assets/images/hero/background.jpg"
},
"contentBackground": "#FFF3E5",
"isRightAligned": false
},
{
"title": "Box With Logo",
"logos": "<img class=\"image__img logos__brand--extra-large\" alt=\"\" title=\"\" src=\"/example-assets/images/logos/brand-logo.png\">",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"isTopAligned": true,
"isBoxLayout": true,
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Call to Action"
},
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/background.jpg",
"src2x": "/example-assets/images/hero/background.jpg"
},
"contentBackground": "#FFF3E5",
"isRightAligned": false
},
{
"title": "White Text Right",
"logos": "<img class=\"image__img logos__brand--extra-large\" alt=\"\" title=\"\" src=\"/example-assets/images/logos/brand-logo.png\">",
"isHighlightedLogo": false,
"isEnlargedLogo": false,
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"isTopAligned": true,
"isBoxLayout": true,
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/background.jpg",
"src2x": "/example-assets/images/hero/background.jpg"
},
"contentBackground": "#002B46",
"isRightAligned": true,
"isCenteredLogo": false,
"contentTextColor": "#FFFFFF"
},
{
"title": "White Text Left",
"logos": "<img class=\"image__img logos__brand--extra-large\" alt=\"\" title=\"\" src=\"/example-assets/images/logos/brand-logo.png\">",
"isHighlightedLogo": false,
"isEnlargedLogo": false,
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"isTopAligned": true,
"isBoxLayout": true,
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/background.jpg",
"src2x": "/example-assets/images/hero/background.jpg"
},
"contentBackground": "#002B46",
"isRightAligned": false,
"isCenteredLogo": false,
"contentTextColor": "#FFFFFF"
},
{
"title": "White Text Second Logo",
"logos": "<img class=\"image__img logos__brand--extra-large\" alt=\"\" title=\"\" src=\"/example-assets/images/logos/brand-logo-fox.png\">",
"isHighlightedLogo": false,
"isEnlargedLogo": false,
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"isTopAligned": true,
"isBoxLayout": true,
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/background.jpg",
"src2x": "/example-assets/images/hero/background.jpg"
},
"contentBackground": "#002B46",
"isRightAligned": false,
"isCenteredLogo": false,
"contentTextColor": "#FFFFFF"
},
{
"logos": "<img class=\"image__img logos__brand--extra-large\" alt=\"\" title=\"\" src=\"/example-assets/images/logos/brand-logo.png\">",
"isHighlightedLogo": false,
"isEnlargedLogo": true,
"isTopAligned": true,
"isBoxLayout": true,
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/background.jpg",
"src2x": "/example-assets/images/hero/background.jpg"
},
"contentBackground": "#002B46",
"isRightAligned": true,
"isCenteredLogo": false
},
{
"logos": "<img class=\"image__img logos__brand--extra-large\" alt=\"\" title=\"\" src=\"/example-assets/images/logos/brand-logo-fox.png\">",
"isHighlightedLogo": false,
"isEnlargedLogo": true,
"isTopAligned": true,
"isBoxLayout": true,
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/background.jpg",
"src2x": "/example-assets/images/hero/background.jpg"
},
"contentBackground": "#000000",
"isRightAligned": true,
"isCenteredLogo": false
},
{
"title": "Floating Content Left",
"logos": "<img class=\"image__img logos__brand--extra-large\" alt=\"\" title=\"\" src=\"/example-assets/images/logos/brand-logo.png\">",
"isHighlightedLogo": false,
"isEnlargedLogo": false,
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"isTopAligned": true,
"isBoxLayout": false,
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Call to Action"
},
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/background.jpg",
"src2x": "/example-assets/images/hero/background.jpg"
},
"contentBackground": "#002B46",
"contentTextColor": "#FFFFFF",
"isRightAligned": false,
"isCenteredLogo": false
},
{
"title": "Floating Content Right",
"logos": "<img class=\"image__img logos__brand--extra-large\" alt=\"\" title=\"\" src=\"/example-assets/images/logos/brand-logo.png\">",
"isHighlightedLogo": false,
"isEnlargedLogo": false,
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"isTopAligned": true,
"isBoxLayout": false,
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Call to Action"
},
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/background.jpg",
"src2x": "/example-assets/images/hero/background.jpg"
},
"contentBackground": "#002B46",
"contentTextColor": "#FFFFFF",
"isRightAligned": true,
"isCenteredLogo": false
},
{
"logos": "<img class=\"image__img logos__brand--extra-large\" alt=\"\" title=\"\" src=\"/example-assets/images/logos/brand-logo.png\">",
"isHighlightedLogo": true,
"isEnlargedLogo": false,
"isTopAligned": true,
"isBoxLayout": false,
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/background.jpg",
"src2x": "/example-assets/images/hero/background.jpg"
},
"contentTextColor": "#FFFFFF",
"isRightAligned": false,
"isCenteredLogo": false
},
{
"logos": "<img class=\"image__img logos__brand--extra-large\" alt=\"\" title=\"\" src=\"/example-assets/images/logos/brand-logo-fox.png\">",
"isHighlightedLogo": true,
"isEnlargedLogo": false,
"isTopAligned": true,
"isBoxLayout": false,
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/background.jpg",
"src2x": "/example-assets/images/hero/background.jpg"
},
"contentTextColor": "#FFFFFF",
"isRightAligned": false,
"isCenteredLogo": false
},
{
"logos": "<img class=\"image__img logos__brand--extra-large\" alt=\"\" title=\"\" src=\"/example-assets/images/logos/brand-logo-fox.png\">",
"isHighlightedLogo": true,
"isEnlargedLogo": false,
"isTopAligned": true,
"isBoxLayout": false,
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/background.jpg",
"src2x": "/example-assets/images/hero/background.jpg"
},
"contentTextColor": "#FFFFFF",
"isRightAligned": true,
"isCenteredLogo": false
},
{
"title": "Durable<br>Super",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Call to Action"
},
"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
}
},
{
"title": "Durable<br>Super",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Call to Action"
},
"vimeo": {
"id": "160142207",
"poster": "/example-assets/images/video-player/poster.jpg",
"autoplay": true,
"overlay": false,
"controls": false,
"loop": false
}
},
{
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/image.jpg",
"src2x": "/example-assets/images/hero/image.jpg"
}
},
{
"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
},
"background": "linear-gradient(#6cd7c1, #67e8db)"
}
]
}
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;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/bricks/components/hero/hero";
No notes defined.