<div class="bricks" data-below-breadcrumb="false">
<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 " style="background: #080d23">
<div class="hero__overlay-container ">
<div class="hero__overlay
">
<h3 class="hero__title">Durable</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="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: #080d23">
<div class="hero__overlay-container ">
<div class="hero__overlay
">
<h3 class="hero__title">Durable</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="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>
<div class="hero__navigation-next"></div>
<div class="hero__navigation-prev"></div>
<div class="hero__pagination"></div>
</div>
</div>
</div>
<div class="text-image-left-right--half-width">
<div class="text-image-left-right__container">
<div class="text-image-left-right__row -media-right">
<div class="text-image-left-right__column">
<div class="image ">
<picture>
<img src="/example-assets/images/text-image-left-right/image.png" class="image__img text-image-left-right__image is-loading" alt="Test" srcset="/example-assets/images/text-image-left-right/image.png 1x, /example-assets/images/text-image-left-right/image.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="text-image-left-right__column">
<div class="text-image-left-right__content-container ">
<h3 class="text-image-left-right__title">Lebe deinen style</h3>
<div class="text-image-left-right__content">
<div class="wysiwyg-content">
<p>Fünfzig Jahre nach ihrem Debüt ist die Vespa Primavera bis heute ein Wahrzeichen für Jugend. Die Primavera steht als Symbol für Freiheit, Weltoffenheit und Dynamik. Stets bewundert und immer auf der Erfolgsspur, präsentiert sich die Primavera, in puncto Sicherheit und Technik optimiert, von ihrer besten Seite. Sie ist sportlich, charmant und nimmt Rücksicht auf unsere Umwelt. Agil, handlich, sicher und komfortabel rollt die jüngste Primavera auf 12“-großen Fünf-Speichen-Aluminiumrädern. Sparsam, laufruhig und leise sorgen ihre Einzylinder-Viertakt-iGet-Motoren für kraftvollen Antrieb und flotte Beschleunigung. LED-Technologie an Front und Heck stehen für beste Sicht und Sicherheit. Serienmäßig mit 1-Kanal-ABS, bietet die Primavera 125, mit Bike-Finder und Sitzbankschloss mit Remote Control, ein weiteres Plus an Sicherheit und Komfort.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-image-left-right--half-width">
<div class="text-image-left-right__container">
<div class="text-image-left-right__row -media-left">
<div class="text-image-left-right__column">
<div class="image ">
<picture>
<img src="/example-assets/images/text-image-left-right/image.png" class="image__img text-image-left-right__image is-loading" alt="Test" srcset="/example-assets/images/text-image-left-right/image.png 1x, /example-assets/images/text-image-left-right/image.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="text-image-left-right__column">
<div class="text-image-left-right__content-container ">
<h3 class="text-image-left-right__title">Lebe deinen style</h3>
<div class="text-image-left-right__content">
<div class="wysiwyg-content">
<p>Fünfzig Jahre nach ihrem Debüt ist die Vespa Primavera bis heute ein Wahrzeichen für Jugend. Die Primavera steht als Symbol für Freiheit, Weltoffenheit und Dynamik. Stets bewundert und immer auf der Erfolgsspur, präsentiert sich die Primavera, in puncto Sicherheit und Technik optimiert, von ihrer besten Seite. Sie ist sportlich, charmant und nimmt Rücksicht auf unsere Umwelt. Agil, handlich, sicher und komfortabel rollt die jüngste Primavera auf 12“-großen Fünf-Speichen-Aluminiumrädern. Sparsam, laufruhig und leise sorgen ihre Einzylinder-Viertakt-iGet-Motoren für kraftvollen Antrieb und flotte Beschleunigung. LED-Technologie an Front und Heck stehen für beste Sicht und Sicherheit. Serienmäßig mit 1-Kanal-ABS, bietet die Primavera 125, mit Bike-Finder und Sitzbankschloss mit Remote Control, ein weiteres Plus an Sicherheit und Komfort.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-family-slider">
<div class="product-family-slider__container">
<div class="swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<div class="data-sheet-image--large-container">
<div class="image ">
<picture>
<img src="/example-assets/images/product-family-slider/product-image.jpg" class="image__img data-sheet-image__image is-loading" alt="Product Test" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="product-family-slider__item-container">
<h3 class="product-family-slider__title">VESPA GTS/GTS Super</h3>
<div class="product-family-slider__button-container">
<div class="product-family-slider__price-container">
<div class="product-family-slider__price-title">UVP inkl. 7.7% MwSt.</div>
<div class="price--extra-large">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix--offer">ab</div>
<div class="price-regular__current-currency--offer">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value--offer">0.00</div>
</div>
</div>
<div class="price-regular__list-price">
<div class="price-regular__list-price-prefix">
<del>statt</del>
</div>
<div class="price-regular__list-price-inner">
<div class="price-regular__list-price-currency">
<del>CHF</del>
</div>
<div class="price-regular__list-price-value">
<del>0.00</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="button--primary">Jetzt konfigurieren</a>
</div>
<div class="product-family-slider__price-subline">Limitierte Einführungsaktion bis zum 31.05.2020</div>
</div>
<div class="data-sheet">
<div class="data-sheet__container">
<div class="data-sheet__description--large-container">
<div class="wysiwyg-content">
<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>
</div>
</div>
<dl class="data-sheet__data--large-container">
<dt class="data-sheet__data-name">Führerschein</dt>
<dd class="data-sheet__data-value">
GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A
</dd>
<dt class="data-sheet__data-name">Leistung</dt>
<dd class="data-sheet__data-value">
7.9 kW - 10.7 HP at 7,700 rpm
</dd>
<dt class="data-sheet__data-name">Farben (je nach Modell)</dt>
<dd class="data-sheet__data-value">
<div class="data-sheet__colors">
<div class="data-sheet__color" style="background-color:#d0021b"></div>
<div class="data-sheet__color" style="background-color:#f5a623"></div>
<div class="data-sheet__color" style="background-color:#333333"></div>
<div class="data-sheet__color" style="background-color:#adafb1"></div>
<div class="data-sheet__color" style="background-color:#320371"></div>
</div>
</dd>
</dl>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="data-sheet-image--large-container">
<div class="image ">
<picture>
<img src="/example-assets/images/product-family-slider/product-image.jpg" class="image__img data-sheet-image__image is-loading" alt="Product Test" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="product-family-slider__item-container">
<h3 class="product-family-slider__title">VESPA GTS/GTS Super</h3>
<div class="product-family-slider__button-container">
<div class="product-family-slider__price-container">
<div class="product-family-slider__price-title">UVP inkl. 7.7% MwSt.</div>
<div class="price--extra-large">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix">ab</div>
<div class="price-regular__current-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">0.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="button--primary">Jetzt konfigurieren</a>
</div>
</div>
<div class="data-sheet">
<div class="data-sheet__container">
<div class="data-sheet__description--large-container">
<div class="wysiwyg-content">
<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>
</div>
</div>
<dl class="data-sheet__data--large-container">
<dt class="data-sheet__data-name">Führerschein</dt>
<dd class="data-sheet__data-value">
GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A
</dd>
<dt class="data-sheet__data-name">Leistung</dt>
<dd class="data-sheet__data-value">
7.9 kW - 10.7 HP at 7,700 rpm
</dd>
<dt class="data-sheet__data-name">Farben (je nach Modell)</dt>
<dd class="data-sheet__data-value">
<div class="data-sheet__colors">
<div class="data-sheet__color" style="background-color:#d0021b"></div>
<div class="data-sheet__color" style="background-color:#f5a623"></div>
<div class="data-sheet__color" style="background-color:#333333"></div>
<div class="data-sheet__color" style="background-color:#adafb1"></div>
<div class="data-sheet__color" style="background-color:#320371"></div>
</div>
</dd>
</dl>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="data-sheet-image--large-container">
<div class="image ">
<picture>
<img src="/example-assets/images/product-family-slider/product-image.jpg" class="image__img data-sheet-image__image is-loading" alt="Product Test" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="product-family-slider__item-container">
<h3 class="product-family-slider__title">VESPA GTS/GTS Super</h3>
<div class="product-family-slider__button-container">
<div class="product-family-slider__price-container">
<div class="product-family-slider__price-title">UVP inkl. 7.7% MwSt.</div>
<div class="price--extra-large">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix">ab</div>
<div class="price-regular__current-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">0.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="button--primary">Jetzt konfigurieren</a>
</div>
</div>
<div class="data-sheet">
<div class="data-sheet__container">
<div class="data-sheet__description--large-container">
<div class="wysiwyg-content">
<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>
</div>
</div>
<dl class="data-sheet__data--large-container">
<dt class="data-sheet__data-name">Führerschein</dt>
<dd class="data-sheet__data-value">
GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A
</dd>
<dt class="data-sheet__data-name">Leistung</dt>
<dd class="data-sheet__data-value">
7.9 kW - 10.7 HP at 7,700 rpm
</dd>
<dt class="data-sheet__data-name">Farben (je nach Modell)</dt>
<dd class="data-sheet__data-value">
<div class="data-sheet__colors">
<div class="data-sheet__color" style="background-color:#d0021b"></div>
<div class="data-sheet__color" style="background-color:#f5a623"></div>
<div class="data-sheet__color" style="background-color:#333333"></div>
<div class="data-sheet__color" style="background-color:#adafb1"></div>
<div class="data-sheet__color" style="background-color:#320371"></div>
</div>
</dd>
</dl>
</div>
</div>
</li>
</ul>
</div>
<div class="product-family-slider__button-prev"></div>
<div class="product-family-slider__button-next"></div>
</div>
</div>
<div class="heading--centered">
<div class="heading__container">
<h3 class="heading__title" id="three-column-text-image">Three column text image</h3>
</div>
</div>
<div class="iframe">
<div class="iframe__container">
<iframe class="iframe__iframe" src="https://www.cando-image.com" allowfullscreen=""></iframe>
</div>
</div>
<div class="multi-column-text-image ">
<div class="multi-column-text-image__container">
<ul class="multi-column-text-image__list--3">
<li class="multi-column-text-image__list-item">
<div class="text-image--left-aligned ">
<div class="text-image__container">
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/image.jpg" class="image__img text-image__image is-loading" alt="Test" srcset="/example-assets/images/text-image/image.jpg 1x, /example-assets/images/text-image/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="text-image__bottom-content">
<h4 class="text-image__title">Lorem, IPSUM dolor</h4>
<div class="text-image__content">
<div class="wysiwyg-content">
<p>Das Original – zum besten Preis. Profitiere vom besten Angebot der Schweiz mit exklusivem Zubehör.</p>
</div>
</div>
<div class="text-image__button">
<a href="#" class="button--primary-small">Mehr erfahren</a>
</div>
</div>
</div>
</div>
</li>
<li class="multi-column-text-image__list-item">
<div class="text-image--left-aligned ">
<div class="text-image__container">
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/image.jpg" class="image__img text-image__image is-loading" alt="Test" srcset="/example-assets/images/text-image/image.jpg 1x, /example-assets/images/text-image/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="text-image__bottom-content">
<h4 class="text-image__title">Lorem, IPSUM dolor</h4>
<div class="text-image__content">
<div class="wysiwyg-content">
<p>Das Original – zum besten Preis. Profitiere vom besten Angebot der Schweiz mit exklusivem Zubehör.</p>
</div>
</div>
<div class="text-image__button">
<a href="#" class="button--primary-small">Mehr erfahren</a>
</div>
</div>
</div>
</div>
</li>
<li class="multi-column-text-image__list-item">
<div class="text-image--left-aligned ">
<div class="text-image__container">
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/image.jpg" class="image__img text-image__image is-loading" alt="Test" srcset="/example-assets/images/text-image/image.jpg 1x, /example-assets/images/text-image/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="text-image__bottom-content">
<h4 class="text-image__title">Lorem, IPSUM dolor</h4>
<div class="text-image__content">
<div class="wysiwyg-content">
<p>Das Original – zum besten Preis. Profitiere vom besten Angebot der Schweiz mit exklusivem Zubehör.</p>
</div>
</div>
<div class="text-image__button">
<a href="#" class="button--primary-small">Mehr erfahren</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="multi-column-image-overlay">
<div class="multi-column-image-overlay__container">
<ul class="multi-column-image-overlay__list--4">
<li class="multi-column-image-overlay__list-item">
<a href="#">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Shimano Unisex Waterproof</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/guy.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Shimano Unisex Waterproof" srcset="/example-assets/images/text-image/guy.jpg 1x, /example-assets/images/text-image/guy.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="multi-column-image-overlay__list-item">
<a href="#">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Shimano Unisex Waterproof</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/guy.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Shimano Unisex Waterproof" srcset="/example-assets/images/text-image/guy.jpg 1x, /example-assets/images/text-image/guy.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="multi-column-image-overlay__list-item">
<a href="#">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Shimano Unisex Waterproof</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/guy.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Shimano Unisex Waterproof" srcset="/example-assets/images/text-image/guy.jpg 1x, /example-assets/images/text-image/guy.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="multi-column-image-overlay__list-item">
<a href="#">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Shimano Unisex Waterproof</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/guy.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Shimano Unisex Waterproof" srcset="/example-assets/images/text-image/guy.jpg 1x, /example-assets/images/text-image/guy.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="heading--left-aligned">
<div class="heading__container">
<h3 class="heading__title" id="one-column-text">One Column Text</h3>
</div>
</div>
<div class="multi-column-text-image ">
<div class="multi-column-text-image__container">
<ul class="multi-column-text-image__list--1">
<li class="multi-column-text-image__list-item">
<div class="text-image--left-aligned ">
<div class="text-image__container">
<div class="text-image__bottom-content">
<h4 class="text-image__title">Lorem, IPSUM dolor</h4>
<div class="text-image__content">
<div class="wysiwyg-content">
<p>Lorem <strong>ipsum</strong> dolor sit amet, <a href="#">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<ul>
<li>Stet clita</li>
<li>kasd gubergren</li>
</ul>
<p>no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />Est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="multi-column-banner--1">
<div class="multi-column-banner__container">
<div class="multi-column-banner__column">
<div class="multi-column-banner__item-container">
<div class="multi-column-banner__overlay-container">
<div class="multi-column-banner__overlay">
<h3 class="multi-column-banner__title">Durable</h3>
<div class="multi-column-banner__content">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
<div class="multi-column-banner__button">
<a href="#" class="button--primary-small">Call to Action</a>
</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/image.png" class="image__img multi-column-banner__background is-loading" alt="Durable" srcset="/example-assets/images/multi-column-banner/image.png 1x, /example-assets/images/multi-column-banner/image.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
</div>
<div class="multi-column-banner--2">
<div class="multi-column-banner__container">
<div class="multi-column-banner__column">
<div class="multi-column-banner__item-container">
<div class="multi-column-banner__overlay-container">
<div class="multi-column-banner__overlay">
<h3 class="multi-column-banner__title">Durable</h3>
<div class="multi-column-banner__content">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
<div class="multi-column-banner__button">
<a href="#" class="button--primary-small">Call to Action</a>
</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/image.png" class="image__img multi-column-banner__background is-loading" alt="Durable" srcset="/example-assets/images/multi-column-banner/image.png 1x, /example-assets/images/multi-column-banner/image.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="multi-column-banner__column">
<div class="multi-column-banner__item-container">
<div class="multi-column-banner__overlay-container">
<div class="multi-column-banner__overlay">
<h3 class="multi-column-banner__title">Durable</h3>
<div class="multi-column-banner__content">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
<div class="multi-column-banner__button">
<a href="#" class="button--primary-small">Call to Action</a>
</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/image.png" class="image__img multi-column-banner__background is-loading" alt="Durable" srcset="/example-assets/images/multi-column-banner/image.png 1x, /example-assets/images/multi-column-banner/image.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
</div>
<div class="form-builder">
<div class="form-builder__container">
<form class="dynamic-form" action="/some-target/" method="POST" data-validation="false" data-jump-to-error-message="true">
<div class="dynamic-form__message--full-width">
<div class="message--error is-hidden">
<div class="message__container--disabled">
<span class="visually-hidden">Error message</span>
<div class="message__content">
<p class="message__text"><b>Error</b>. The form is not valid! Please check the fields in this dialog</p>
</div>
<div class="message__close-button">
<button class="button-icon--icon-regular -icon-close" type="button" name="close-big-menu" value="yes">
<span class="visually-hidden">Schliessen</span>
</button>
</div>
</div>
</div>
</div>
<fieldset class="dynamic-form__fieldset--full-width">
<div class="dynamic-form__element">
<div class="select--light is-initialized with-label">
<div class="select__wrapper">
<select class="select__select" id="salutation" name="salutation" required>
<option value="" disabled selected>Bitte wählen</option>
<option value="mr">Herr</option>
<option value="ms">Frau</option>
</select>
<label class="select__label" for="salutation">Anrede
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="firstName" type="text" name="firstName" required />
<label class="text-field__label" for="firstName">Vorname
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="lastName" type="text" name="lastName" required />
<label class="text-field__label" for="lastName">Nachname
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="mail" type="email" name="mail" required />
<label class="text-field__label" for="mail">E-Mail Adresse
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element--zip-city">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="zip" type="text" name="zip" required />
<label class="text-field__label" for="zip">PLZ
*
</label>
</div>
</div>
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="city" type="text" name="city" required />
<label class="text-field__label" for="city">Ort
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="select--light is-initialized is-filled-in with-label">
<div class="select__wrapper">
<select class="select__select" id="country" name="country" required>
<option value="" disabled>Bitte wählen</option>
<option value="ch" selected="selected">Schweiz</option>
<option value="de">Deutschland</option>
<option value="fr">Frankreich</option>
<option value="it">Italien</option>
<option value="li">Lichtenstein</option>
</select>
<label class="select__label" for="country">Land
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-area--light is-initialized">
<div class="text-area__wrapper">
<textarea class="text-area__input" id="message" name="message" required maxlength="999">
</textarea>
<label class="text-area__label" for="message">Nachricht
*
</label>
</div>
</div>
</div>
</fieldset>
<button class="button--primary-small" type="submit">Absenden</button>
</form>
</div>
</div>
<div class="heading--centered">
<div class="heading__container">
<h3 class="heading__title" id="social-feed">Social Feed</h3>
</div>
</div>
<div class="social-feed">
<script src="https://assets.juicer.io/embed.js" async defer></script>
<link href="https://assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
<div class="social-feed__container">
<ul class="juicer-feed" data-feed-id="de_sede_switzerland" data-per="25" data-pages="1" data-truncate="80" data-gutter="16"></ul>
</div>
</div>
</div>
{% include '@SharedComponents/modules/bricks/components/bricks/bricks.twig' %}
{
"bricks": [
{
"name": "hero",
"data": {
"headingLevel": 3,
"items": [
{
"title": "Durable",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Call to Action"
},
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/image.jpg",
"src2x": "/example-assets/images/hero/image.jpg"
},
"background": "#080d23"
},
{
"title": "Durable",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Call to Action"
},
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/image.jpg",
"src2x": "/example-assets/images/hero/image.jpg"
},
"background": "#080d23"
}
]
}
},
{
"name": "text-image-left-right",
"data": {
"headingLevel": "3",
"title": "Lebe deinen style",
"content": "<p>Fünfzig Jahre nach ihrem Debüt ist die Vespa Primavera bis heute ein Wahrzeichen für Jugend. Die Primavera steht als Symbol für Freiheit, Weltoffenheit und Dynamik. Stets bewundert und immer auf der Erfolgsspur, präsentiert sich die Primavera, in puncto Sicherheit und Technik optimiert, von ihrer besten Seite. Sie ist sportlich, charmant und nimmt Rücksicht auf unsere Umwelt. Agil, handlich, sicher und komfortabel rollt die jüngste Primavera auf 12“-großen Fünf-Speichen-Aluminiumrädern. Sparsam, laufruhig und leise sorgen ihre Einzylinder-Viertakt-iGet-Motoren für kraftvollen Antrieb und flotte Beschleunigung. LED-Technologie an Front und Heck stehen für beste Sicht und Sicherheit. Serienmäßig mit 1-Kanal-ABS, bietet die Primavera 125, mit Bike-Finder und Sitzbankschloss mit Remote Control, ein weiteres Plus an Sicherheit und Komfort.</p>",
"image": {
"alt": "Test",
"src": "/example-assets/images/text-image-left-right/image.png",
"src2x": "/example-assets/images/text-image-left-right/image.png"
},
"mediaAlign": "right",
"centered": false,
"imageSize": "half-width"
}
},
{
"name": "text-image-left-right",
"data": {
"headingLevel": "3",
"title": "Lebe deinen style",
"content": "<p>Fünfzig Jahre nach ihrem Debüt ist die Vespa Primavera bis heute ein Wahrzeichen für Jugend. Die Primavera steht als Symbol für Freiheit, Weltoffenheit und Dynamik. Stets bewundert und immer auf der Erfolgsspur, präsentiert sich die Primavera, in puncto Sicherheit und Technik optimiert, von ihrer besten Seite. Sie ist sportlich, charmant und nimmt Rücksicht auf unsere Umwelt. Agil, handlich, sicher und komfortabel rollt die jüngste Primavera auf 12“-großen Fünf-Speichen-Aluminiumrädern. Sparsam, laufruhig und leise sorgen ihre Einzylinder-Viertakt-iGet-Motoren für kraftvollen Antrieb und flotte Beschleunigung. LED-Technologie an Front und Heck stehen für beste Sicht und Sicherheit. Serienmäßig mit 1-Kanal-ABS, bietet die Primavera 125, mit Bike-Finder und Sitzbankschloss mit Remote Control, ein weiteres Plus an Sicherheit und Komfort.</p>",
"image": {
"alt": "Test",
"src": "/example-assets/images/text-image-left-right/image.png",
"src2x": "/example-assets/images/text-image-left-right/image.png"
},
"mediaAlign": "left",
"centered": false,
"imageSize": "half-width"
}
},
{
"name": "product-family-slider",
"data": {
"headingLevel": "3",
"items": [
{
"title": "VESPA GTS/GTS Super",
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Jetzt konfigurieren"
},
"priceTitle": "UVP inkl. 7.7% MwSt.",
"price": {
"variant": "extra-large",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "5045.-",
"listPrice": "6095.-",
"from": true
}
},
"priceSubline": "Limitierte Einführungsaktion bis zum 31.05.2020",
"dataSheetImage": {
"variant": "large-container",
"image": {
"alt": "Product Test",
"src": "/example-assets/images/product-family-slider/product-image.jpg"
}
},
"dataSheet": {
"variant": "large-container",
"description": "<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>",
"data": [
{
"title": "Führerschein",
"value": "GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A",
"type": "text"
},
{
"title": "Leistung",
"value": "7.9 kW - 10.7 HP at 7,700 rpm",
"type": "text"
},
{
"title": "Farben (je nach Modell)",
"value": [
"#d0021b",
"#f5a623",
"#333333",
"#adafb1",
"#320371"
],
"type": "colors"
}
]
}
},
{
"title": "VESPA GTS/GTS Super",
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Jetzt konfigurieren"
},
"priceTitle": "UVP inkl. 7.7% MwSt.",
"price": {
"variant": "extra-large",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "5045.-",
"from": true
}
},
"dataSheetImage": {
"variant": "large-container",
"image": {
"alt": "Product Test",
"src": "/example-assets/images/product-family-slider/product-image.jpg"
}
},
"dataSheet": {
"variant": "large-container",
"description": "<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>",
"data": [
{
"title": "Führerschein",
"value": "GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A",
"type": "text"
},
{
"title": "Leistung",
"value": "7.9 kW - 10.7 HP at 7,700 rpm",
"type": "text"
},
{
"title": "Farben (je nach Modell)",
"value": [
"#d0021b",
"#f5a623",
"#333333",
"#adafb1",
"#320371"
],
"type": "colors"
}
]
}
},
{
"title": "VESPA GTS/GTS Super",
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Jetzt konfigurieren"
},
"priceTitle": "UVP inkl. 7.7% MwSt.",
"price": {
"variant": "extra-large",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "5045.-",
"from": true
}
},
"dataSheetImage": {
"variant": "large-container",
"image": {
"alt": "Product Test",
"src": "/example-assets/images/product-family-slider/product-image.jpg"
}
},
"dataSheet": {
"variant": "large-container",
"description": "<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>",
"data": [
{
"title": "Führerschein",
"value": "GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A",
"type": "text"
},
{
"title": "Leistung",
"value": "7.9 kW - 10.7 HP at 7,700 rpm",
"type": "text"
},
{
"title": "Farben (je nach Modell)",
"value": [
"#d0021b",
"#f5a623",
"#333333",
"#adafb1",
"#320371"
],
"type": "colors"
}
]
}
}
]
}
},
{
"name": "heading",
"data": {
"variant": "centered",
"title": "Three column text image",
"level": "3"
}
},
{
"name": "iframe",
"data": {
"url": "https://www.cando-image.com"
}
},
{
"name": "multi-column-text-image",
"folder": "multi-column-text-image",
"data": {
"headingLevel": "4",
"items": [
{
"title": "Lorem, IPSUM dolor",
"content": "<p>Das Original – zum besten Preis. Profitiere vom besten Angebot der Schweiz mit exklusivem Zubehör.</p>",
"image": {
"alt": "Test",
"src": "/example-assets/images/text-image/image.jpg",
"src2x": "/example-assets/images/text-image/image.jpg"
},
"button": {
"title": "Mehr erfahren",
"href": "#"
}
},
{
"title": "Lorem, IPSUM dolor",
"content": "<p>Das Original – zum besten Preis. Profitiere vom besten Angebot der Schweiz mit exklusivem Zubehör.</p>",
"image": {
"alt": "Test",
"src": "/example-assets/images/text-image/image.jpg",
"src2x": "/example-assets/images/text-image/image.jpg"
},
"button": {
"title": "Mehr erfahren",
"href": "#"
}
},
{
"title": "Lorem, IPSUM dolor",
"content": "<p>Das Original – zum besten Preis. Profitiere vom besten Angebot der Schweiz mit exklusivem Zubehör.</p>",
"image": {
"alt": "Test",
"src": "/example-assets/images/text-image/image.jpg",
"src2x": "/example-assets/images/text-image/image.jpg"
},
"button": {
"title": "Mehr erfahren",
"href": "#"
}
}
]
}
},
{
"name": "multi-column-image-overlay",
"data": {
"headingLevel": 3,
"items": [
{
"title": "Shimano Unisex Waterproof",
"href": "#",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/text-image/guy.jpg",
"src2x": "/example-assets/images/text-image/guy.jpg",
"alt": "Shimano Unisex Waterproof"
}
},
{
"title": "Shimano Unisex Waterproof",
"href": "#",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/text-image/guy.jpg",
"src2x": "/example-assets/images/text-image/guy.jpg",
"alt": "Shimano Unisex Waterproof"
}
},
{
"title": "Shimano Unisex Waterproof",
"href": "#",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/text-image/guy.jpg",
"src2x": "/example-assets/images/text-image/guy.jpg",
"alt": "Shimano Unisex Waterproof"
}
},
{
"title": "Shimano Unisex Waterproof",
"href": "#",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/text-image/guy.jpg",
"src2x": "/example-assets/images/text-image/guy.jpg",
"alt": "Shimano Unisex Waterproof"
}
}
]
}
},
{
"name": "heading",
"data": {
"variant": "left-aligned",
"title": "One Column Text",
"level": "3"
}
},
{
"name": "multi-column-text-image",
"folder": "multi-column-text-image",
"data": {
"headingLevel": "4",
"items": [
{
"title": "Lorem, IPSUM dolor",
"content": "<p>Lorem <strong>ipsum</strong> dolor sit amet, <a href=\"#\">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p><ul><li>Stet clita</li><li>kasd gubergren</li></ul><p>no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br/>Est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum</p>"
}
]
}
},
{
"name": "multi-column-banner",
"data": {
"headingLevel": 3,
"items": [
{
"title": "Durable",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"image": {
"src": "/example-assets/images/multi-column-banner/image.png",
"src2x": "/example-assets/images/multi-column-banner/image.png",
"alt": "Durable"
},
"button": {
"variant": "primary-small",
"type": "a",
"href": "#",
"title": "Call to Action"
}
}
]
}
},
{
"name": "multi-column-banner",
"data": {
"headingLevel": 3,
"items": [
{
"title": "Durable",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"image": {
"src": "/example-assets/images/multi-column-banner/image.png",
"src2x": "/example-assets/images/multi-column-banner/image.png",
"alt": "Durable"
},
"button": {
"variant": "primary-small",
"type": "a",
"href": "#",
"title": "Call to Action"
}
},
{
"title": "Durable",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"image": {
"src": "/example-assets/images/multi-column-banner/image.png",
"src2x": "/example-assets/images/multi-column-banner/image.png",
"alt": "Durable"
},
"button": {
"variant": "primary-small",
"type": "a",
"href": "#",
"title": "Call to Action"
}
}
]
}
},
{
"name": "form-builder",
"data": {
"form": {
"variant": "full-width",
"form": {
"method": "POST",
"action": "/some-target/",
"jumpToErrorMessage": true,
"message": {
"closeButton": {
"variant": "icon-regular",
"title": "Schliessen",
"icon": "close",
"type": "button",
"role": "button",
"name": "close-big-menu",
"value": "yes"
},
"isHidden": true,
"container": false,
"labels": {
"info": "Information message",
"error": "Error message",
"warning": "Warning message",
"success": "Success message"
},
"variant": "error",
"message": "<b>Error</b>. The form is not valid! Please check the fields in this dialog"
}
},
"fields": [
{
"component": "select",
"variant": "light",
"id": "salutation",
"name": "salutation",
"label": "Anrede",
"required": true,
"disabled": false,
"selected": false,
"options": {
"mr": "Herr",
"ms": "Frau"
},
"choose": "Bitte wählen",
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "firstName",
"name": "firstName",
"label": "Vorname",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "lastName",
"name": "lastName",
"label": "Nachname",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "mail",
"name": "mail",
"label": "E-Mail Adresse",
"required": true,
"value": "",
"disabled": false,
"type": "email",
"autocomplete": false
},
{
"component": "text-field-zip-city",
"variant": "light",
"id": "zip",
"name": "zip",
"label": "PLZ",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field-zip-city",
"variant": "light",
"id": "city",
"name": "city",
"label": "Ort",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "select",
"variant": "light",
"id": "country",
"name": "country",
"label": "Land",
"required": true,
"disabled": false,
"selected": "ch",
"options": {
"ch": "Schweiz",
"de": "Deutschland",
"fr": "Frankreich",
"it": "Italien",
"li": "Lichtenstein"
},
"choose": "Bitte wählen",
"error": ""
},
{
"component": "text-area",
"variant": "light",
"id": "message",
"name": "message",
"label": "Nachricht",
"required": true,
"value": "",
"disabled": false,
"maxlength": 999,
"error": "",
"helper": ""
}
],
"submitButton": {
"variant": "primary-small",
"type": "button",
"title": "Absenden"
}
}
}
},
{
"name": "heading",
"data": {
"variant": "centered",
"title": "Social Feed",
"level": "3"
}
},
{
"name": "social-feed",
"data": {
"feedId": "de_sede_switzerland",
"maxItems": "25",
"pages": "1",
"truncate": "80",
"gutter": "16"
}
}
],
"variant": "not-below-breadcrumb"
}
import BricksMediator, {name as title} from 'cando-cx-components-library/components/modules/bricks/components/bricks/bricks-mediator';
export default BricksMediator;
export const name = title;
No notes defined.