Source: scss/_3-Components.scss, line 1
FAZUA Living Styleguide
Source: scss/_3-Components/_panorama.scss, line 1
3.3 Panorama
Source: scss/_3-Components/_panorama.scss, line 7
3.3.1 Panorama normal
Example
<section class="page-section">
<div class="panorama">
<div class="panorama__wrapper">
<div class="panorama__image">
<picture>
<source media="(max-width: 449.9px)" srcset="/placeholder/panorama-mobile.jpg">
<img class="img-fluid " src="/placeholder/panorama.jpg" alt="" >
</picture>
</div>
</div>
</div>
</section>Source: scss/_3-Components/_panorama.scss, line 26
3.3.2 Panorama parallax
Example
<section class="page-section">
<div class="panorama js--parallax-section">
<div class="panorama__wrapper">
<div class="panorama__image js--parallax-scrolling">
<picture>
<source media="(max-width: 449.9px)" srcset="/placeholder/scroll-image-mobile.jpg">
<img class="img-fluid " src="/placeholder/scroll-image.jpg" alt="" >
</picture>
</div>
</div>
</div>
</section>Source: scss/_3-Components/_tooltip.scss, line 1
3.4 Tooltip
Example
<div class="product-details__color-wrapper">
<div class="product-details__color black js--color-tooltip" data-toggle="tooltip" data-placement="right" title="" data-original-title="Super dark black"></div>
<div class="product-details__color dark-blue js--color-tooltip" data-toggle="tooltip" data-placement="right" title="" data-original-title="Super dark blue"></div>
<div class="product-details__color dark-red js--color-tooltip" data-toggle="tooltip" data-placement="right" title="" data-original-title="red"></div>
<div class="product-details__color dark-red-black js--color-tooltip" data-toggle="tooltip" data-placement="right" title="" data-original-title="Super dark red/black"></div>
</div>Source: scss/_3-Components/_list.scss, line 1
3.5 List
Example
- Natürliches Fahrgefühl
- Geringes Gewicht
- Vollständig im Rahmen integriert Wet hinter den Worbergen liegen Vokalien und Konsonanten
- Entnehmbares Antriebssystem
<ul class="list p3">
<li>Natürliches Fahrgefühl</li>
<li>Geringes Gewicht</li>
<li>Vollständig im Rahmen integriert Wet hinter den Worbergen liegen Vokalien und Konsonanten</li>
<li>Entnehmbares Antriebssystem</li>
</ul>Source: scss/_3-Components/_newsletter.scss, line 1
3.6 Newsletter
Example
<section class="page-section page-section--grey">
<div class="grid justify-content-center">
<div class="col-desk-2 col-tab-1 col-mob-6">
<div class="newsletter__wrapper">
<div class="newsletter__logo">
<svg class="icon">
<use xlink:href="#logo-symbol" href="#logo-symbol" aria-hidden="true"></use>
</svg>
</div>
</div>
</div>
<div class="col-desk-4 col-tab-4 col-mob-6">
<div class="newsletter__wrapper">
<div class="newsletter__content">
<p class="p4 font-weight-bold mb-0">Melde dich zum Newsletter an</p>
<p class="p4 mb-0">Sei immer uptodate mit allen Neuigkeiten.</p>
</div>
</div>
</div>
<div class="col-desk-6 col-tab-5 col-mob-6">
<div class="newsletter__input-wrapper">
<div class="input-group has-float-label">
<input type="email" class="form-control" placeholder=" " id="newsletter" aria-label="Email Adresse" aria-describedby="button-addon2">
<label class="form-control-placeholder" for="newsletter">Email Adresse</label>
<div class="input-group-append">
<button class="btn btn-dark btn-lg" type="button" id="button-addon2" data-toggle="modal" data-target="#newsletterModal"><span>Anmelden</span></button>
</div>
</div>
</div>
</div>
</div>
</section>Source: scss/_3-Components/_support.scss, line 1
3.7 Support Section
Example
Du brauchst Hilfe oder hast eine Frage
Kontaktiere direkt unser Support Team.
+49 (0) 89 540462-100
Mo. – Fr. 09:00 – 12:00 und 14:00 – 16:00
<section class="page-section page-section--grey page-section--mt">
<div class="grid justify-content-center">
<div class="support__wrapper col-desk-2 col-tab-5 col-mob-6">
<div class="support__content support__content--logo">
<div class="support__logo">
<svg class="icon">
<use xlink:href="#logo-symbol" href="#logo-symbol" aria-hidden="true"></use>
</svg>
</div>
</div>
</div>
<div class="support__wrapper col-desk-4 col-tab-5 col-mob-6">
<div class="support__content">
<p class="p4 font-weight-bold mb-0">Du brauchst Hilfe oder hast eine Frage</p>
<p class="p4 mb-0">Kontaktiere direkt unser Support Team.</p>
</div>
</div>
<div class="support__wrapper col-desk-4 col-tab-5 col-mob-6">
<div class="support__content">
<a href="#" class="p2 support__phone-link">+49 (0) 89 540462-100
<svg class="icon">
<use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use>
</svg>
</a>
<p class="f1 mb-0">Mo. – Fr. 09:00 – 12:00 und 14:00 – 16:00</p>
</div>
</div>
<div class="support__wrapper col-desk-2 col-tab-5 col-mob-6">
<div class="support__content support__content--link">
<a href="#" class="link-sm">Kontaktformular ausfüllen</a>
</div>
</div>
</div>
</section>Source: scss/_3-Components/_contact-box.scss, line 1
3.8 Contact Box
contact box is shown on the support modules
Example
Du kannst nicht finden wonach du suchst?
Kontaktiere einfach direkt unser Support-Team!
+49 (0) 89 540462-100
Aufgrund des erhöhten Anrufaufkommens bitten wir darum, das Kontakt-Formular zu verwenden. Wir sind Montag bis Freitag von 09:00 bis 12:00 Uhr und 14:00 bis 16:00 Uhr MES für Dich da.
Kontaktformular hier ausfüllen<div class="contact-box">
<h3 class="contact-box__title">Du kannst nicht finden wonach du suchst?</h3>
<p class="p3 mb-0">Kontaktiere einfach direkt unser Support-Team!</p>
<hr>
<a href="#" class="p2 contact-box__link">+49 (0) 89 540462-100
<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg>
</a>
<p class="f2 contact-box__copy">Aufgrund des erhöhten Anrufaufkommens bitten wir darum, das Kontakt-Formular zu verwenden. Wir sind
Montag bis Freitag von 09:00 bis 12:00 Uhr und 14:00 bis 16:00 Uhr MES für Dich da.</p>
<a href="#" class="link-sm">Kontaktformular hier ausfüllen</a>
</div>Source: scss/_3-Components/_site-switch.scss, line 1
3.9 Site switch
site switch is shown on the support modules to switch between support pages
Example
<div class="site-switch">
<div class="site-switch__item site-switch__item--left">
<a href="#" class="site-switch__link f1"><span>Kontakt</span>
<svg class="icon"><use xlink:href="#icon-left" href="#icon-left" aria-hidden="true"></use></svg>
</a>
</div>
<div class="site-switch__item site-switch__item--right ">
<a href="#" class="site-switch__link f1">
<svg class="icon"><use xlink:href="#icon-right" href="#icon-right" aria-hidden="true"></use></svg>
<span>FAQ</span></a>
</div>
</div>Source: scss/_3-Components/_aggregator.scss, line 1
3.10 Modals
Example
<a class="link-sm" href="#" data-toggle="modal" data-target="#exampleModalLong">Verfügbarkeit prüfen</a>
<div class="aggregator modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog aggregator__dialog" role="document">
<div class="modal-content aggregator__content">
<button type="button" class="close aggregator__close" data-dismiss="modal" aria-label="Close">
<svg class="icon"><use xlink:href="#icon-close" href="#icon-close" aria-hidden="true"></use></svg>
</button>
<div class="aggregator__intro mx-0">
<div class="aggregator__image">
<h5 class="mb-0 d-block d-lg-none">Canyon</h5>
<h6 class="d-block d-lg-none">Endurace: On</h6>
<img class="img-fluid" src="/placeholder/bike.png" srcset="/placeholder/bike@2x.png 2x" alt="">
</div>
<div class="aggregator__pick">
<h5 class="mb-0 d-none d-lg-block">Canyon</h5>
<h6 class="d-none d-lg-block">Endurace: On</h6>
<p class="p4">Modell</p>
<div class="ln-select form-group has-float-label js--custom-select">
<label class="ln-select__label" for="form-select-model-select">Option auswählen</label>
<select name="option-select" id="form-select-model-select">
<option value="option-first">Option 1</option>
<option value="option-second">Option 2</option>
<option value="option-third">Option 3</option>
</select>
</div>
<div class="aggregator__information">
<ul>
<li>Kategorie</li>
<li>Frame</li>
<li>Schaltung</li>
<li>Energy</li>
</ul>
<ul>
<li>Road</li>
<li>Aluminium</li>
<li>Shimano GRX Di2</li>
<li>RIDE 50 EVATION</li>
</ul>
</div>
<hr>
<span class="f1">ab <span class="h3">4.999 €</span></span>
<button type="button" class="btn btn-primary btn-block disabled"><span>Verfügbarkeit prüfen</span>
</button>
</div>
</div>
</div>
</div>
</div>Source: scss/_3-Components/_aggregator.scss, line 170
3.10.2 Extended Modal
Template for extended Modal
Example
<a class="link-sm" href="#" data-toggle="modal" data-target="#aggregatorExtended">Verfügbarkeit prüfen</a>
<div class="aggregator modal fade" id="aggregatorExtended" tabindex="-1" role="dialog" aria-labelledby="aggregatorExtendedTitle" aria-hidden="true">
<div class="modal-dialog aggregator__dialog" role="document">
<div class="modal-content aggregator__content">
<button type="button" class="close aggregator__close" data-dismiss="modal" aria-label="Close">
<svg class="icon"><use xlink:href="#icon-close" href="#icon-close" aria-hidden="true"></use></svg>
</button>
<div class="aggregator__intro">
<div class="aggregator__image">
<h5 class="mb-0 d-block d-lg-none">Canyon</h5>
<h6 class="d-block d-lg-none">Endurace: On</h6>
<img class="img-fluid" src="/placeholder/bike.png" srcset="/placeholder/bike@2x.png 2x" alt="">
</div>
<div class="aggregator__pick">
<h5 class="mb-0 d-none d-lg-block">Canyon</h5>
<h6 class="d-none d-lg-block">Endurace: On</h6>
<p class="p4">Modell</p>
<div class="ln-select form-group has-float-label js--custom-select">
<label class="ln-select__label" for="form-select-model-select">Option auswählen</label>
<select name="option-select" id="form-select-model-select">
<option value="option-first">Option 1</option>
<option value="option-second">Option 2</option>
<option value="option-third">Option 3</option>
</select>
</div>
<div class="aggregator__information">
<ul>
<li>Kategorie</li>
<li>Frame</li>
<li>Schaltung</li>
<li>Energy</li>
</ul>
<ul>
<li>Road</li>
<li>Aluminium</li>
<li>Shimano GRX Di2</li>
<li>RIDE 50 EVATION</li>
</ul>
</div>
<hr>
<span class="f1">ab <span class="h3">4.999 €</span></span>
<button type="button" class="btn btn-primary btn-block disabled"><span>Verfügbarkeit prüfen</span>
</button>
</div>
</div>
<div class="aggregator__form">
<div class="aggregator__form-headline">
<h5 class="mb-0">Canyon</h5>
<h6>Endurace: On</h6>
</div>
<div class="aggregator__form-wrapper">
<div class="aggregator__form-place">
<div class="ln-select form-group has-float-label js--custom-select">
<label class="ln-select__label" for="country-option-select">Country</label>
<select name="country-select" id="country-option-select">
<option value="germany">Germany</option>
<option value="england">England</option>
<option value="albania">Albania</option>
<option value="denmark">Denmark</option>
<option value="croatia">Croatia</option>
<option value="france">France</option>
</select>
</div>
<div class="form-group has-float-label">
<input type="text" class="form-control" id="plzNumber" placeholder=" ">
<label class="form-control-placeholder" for="plzNumber">PLZ</label>
</div>
</div>
<div class="aggregator__form-settings">
<div class="ln-select ln-select--radio form-group has-float-label js--custom-select">
<label class="ln-select__label" for="size-select">Size</label>
<select name="cm-select" id="size-select">
<option value="s-160-170-cm">S 160 - 170 cm</option>
<option value="m-170-180-cm">M 170 - 180 cm</option>
<option value="l-180-190-cm">L 180 - 190 cm</option>
</select>
</div>
<div class="ln-select form-group has-float-label js--custom-select">
<label class="ln-select__label" for="frame-select">Frame</label>
<select name="country-select" id="frame-select">
<option value="frame-1">Frame 1</option>
<option value="frame-2">Frame 2</option>
<option value="frame-3">Frame 3</option>
<option value="frame-4">Frame 4</option>
</select>
</div>
<div class="ln-select form-group has-float-label js--custom-select">
<label class="ln-select__label" for="color-select">Color</label>
<select name="country-select" id="color-select">
<option value="black">Black</option>
<option value="white">White</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
</select>
</div>
</div>
</div>
</div>
<div class="aggregator__dealer">
<div class="aggregator__dealer-headline">
<h2>Top Online Händler</h2>
<p class="p3"><span>4</span> Händler gefunden</p>
</div>
<div class="swiper-container dealer-slider js--swiper-slider-variant">
<div class="dealer-card__wrapper swiper-wrapper">
<div class="swiper-slide dealer-card__item">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<hr>
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<a class="link-ext" href="#">Kaufen<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>
<div class="swiper-slide dealer-card__item">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<hr>
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<a class="link-ext" href="#">Kaufen<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>
<div class="swiper-slide dealer-card__item">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<hr>
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<a class="link-ext" href="#">Kaufen<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
<div class="d-none d-lg-block">
<a href="#" class="link-sm">Alle Online Händler anzeigen</a>
</div>
</div>
<div class="aggregator__dealer">
<div class="aggregator__dealer-headline">
<h2>Händler in deiner Nähe</h2>
<p class="p3"><span>10</span> Händler gefunden</p>
</div>
<div class="swiper-container dealer-slider js--swiper-slider-variant">
<div class="dealer-card__wrapper swiper-wrapper">
<div class="swiper-slide dealer-card__item dealer-card__item--big">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<div class="dealer-card__info js--dealer-card-info">
<span class="f2">FAZUA Premium Partner</span>
<button type="button" class="btn btn-link dealer-card__plus">
<svg class="icon"><use xlink:href="#icon-plus" href="#icon-plus" aria-hidden="true"></use></svg>
</button>
<div class="dealer-card__info-text dealer-card__info-text--close">
<ul class="f2">
<li>werden regelmäßig geschult sind und sind echte Experten für das FAZUA Antriebssystem</li>
<li>haben Ersatzteile auf Lager</li>
<li>stellen Testräder zur Verfügung</li>
<li>bieten Service für alle Marken mit Fazua Antrieb</li>
</ul>
</div>
</div>
<hr>
<div class="dealer-card__body">
<p class="p4">
Musterweg 6,<br>
81825 München<br>
Deutschland<br>
www.fahrradxxl.de<br>
Mo – Fr: 9.00 – 18.00
</p>
<div class="dealer-card__distance d-none d-lg-block">
<button type="button" class="btn btn-link dealer-card__pin">
<svg class="icon"><use xlink:href="#icon-pin" href="#icon-pin" aria-hidden="true"></use></svg>
</button>
<span>2 km</span>
</div>
<img class="img-fluid w-100 d-none d-lg-block" src="/placeholder/google-maps.jpg" alt="" style="border: 1px solid #dbdcde;">
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<p class="p4 mb-0">Noch <span>5</span> auf Lager</p>
</div>
</div>
<hr>
<div class="dealer-card__action">
<p class="p4 font-extra-bold">Fahrrad reservieren</p>
<a class="link-ext p4" href="#">+49 89 1745 457<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
<a class="link-ext p4" href="#">fahradccl@gmail.com<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>
<div class="swiper-slide dealer-card__item dealer-card__item--big">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<div class="dealer-card__info js--dealer-card-info">
<span class="f2">FAZUA Premium Partner</span>
<button type="button" class="btn btn-link dealer-card__plus">
<svg class="icon"><use xlink:href="#icon-plus" href="#icon-plus" aria-hidden="true"></use></svg>
</button>
<div class="dealer-card__info-text dealer-card__info-text--close">
<ul class="f2">
<li>werden regelmäßig geschult sind und sind echte Experten für das FAZUA Antriebssystem</li>
<li>haben Ersatzteile auf Lager</li>
<li>stellen Testräder zur Verfügung</li>
<li>bieten Service für alle Marken mit Fazua Antrieb</li>
</ul>
</div>
</div>
<hr>
<div class="dealer-card__body">
<p class="p4">
Musterweg 6,<br>
81825 München<br>
Deutschland<br>
www.fahrradxxl.de<br>
Mo – Fr: 9.00 – 18.00
</p>
<div class="dealer-card__distance d-none d-lg-block">
<button type="button" class="btn btn-link dealer-card__pin">
<svg class="icon"><use xlink:href="#icon-pin" href="#icon-pin" aria-hidden="true"></use></svg>
</button>
<span>2 km</span>
</div>
<img class="img-fluid w-100 d-none d-lg-block" src="/placeholder/google-maps.jpg" alt="" style="border: 1px solid #dbdcde;">
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<p class="p4 mb-0">Noch <span>5</span> auf Lager</p>
</div>
</div>
<hr>
<div class="dealer-card__action">
<p class="p4 font-extra-bold">Fahrrad reservieren</p>
<a class="link-ext p4" href="#">+49 89 1745 457<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
<a class="link-ext p4" href="#">fahradccl@gmail.com<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>
<div class="swiper-slide dealer-card__item dealer-card__item--big">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<hr>
<div class="dealer-card__body">
<p class="p4">
Musterweg 6,<br>
81825 München<br>
Deutschland<br>
www.fahrradxxl.de<br>
Mo – Fr: 9.00 – 18.00
</p>
<div class="dealer-card__distance d-none d-lg-block">
<button type="button" class="btn btn-link dealer-card__pin">
<svg class="icon"><use xlink:href="#icon-pin" href="#icon-pin" aria-hidden="true"></use></svg>
</button>
<span>2 km</span>
</div>
<img class="img-fluid w-100 d-none d-lg-block" src="/placeholder/google-maps.jpg" alt="" style="border: 1px solid #dbdcde;">
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<p class="p4 mb-0">Noch <span>5</span> auf Lager</p>
</div>
</div>
<hr>
<div class="dealer-card__action">
<p class="p4 font-extra-bold">Fahrrad reservieren</p>
<a class="link-ext p4" href="#">+49 89 1745 457<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
<a class="link-ext p4" href="#">fahradccl@gmail.com<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
<div class="d-none d-lg-block">
<a href="#" class="link-sm">Alle Händler anzeigen</a>
</div>
</div>
</div>
</div>
</div>Example
<section class="page-section page-section--content page-section--pt-none">
<div class="grid">
<div class="col-desk-12">
<nav class="breadcrumb" aria-label="Breadcrumb-Navigation">
<ol class="breadcrumb__menu list-unstyled">
<li class="breadcrumb__item">
<a href="#" class="breadcrumb__link f1">Home</a>
<svg class="icon">
<use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use>
</svg>
</li>
<li class="breadcrumb__item">
<a href="#" class="breadcrumb__link f1">Company</a>
<svg class="icon">
<use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use>
</svg>
</li>
<li class="breadcrumb__item">
<a href="#" class="breadcrumb__link f1" aria-current="page">Sustainability</a>
</li>
</ol>
</nav>
</div>
</div>
</section>Source: scss/_3-Components/accordion-collapse/_accordion.scss, line 1
3.12 Accordion
Source: scss/_3-Components/accordion-collapse/_faq-accordion.scss, line 1
3.12.1 FAQ Accordion
FAQ elements based on highlight card with accordion functionality
Example
Fragen zum Antriebssystem
-
Du kannst bei Deinem Händler oder in unserem Onlineshop einen zusätzlichen Akku kaufen. Der Akku hat in etwa die Größe und das Gewicht einer Trinkflasche und lässt sich leicht transportieren.
<h3 class="h4 mt-lg-3">Fragen zum Antriebssystem</h3>
<div class="faq-accordion">
<ul class="faq-accordion__list js--faq-collapse">
<li class="highlight-card highlight-card--faq highlight-card--support">
<button class="highlight-card__btn p3" data-collapse-toggle>
<svg class="icon icon--plus">
<use xlink:href="#icon-plus" href="#icon-plus" aria-hidden="true"></use>
</svg>
<svg class="icon icon--minus">
<use xlink:href="#icon-minus" href="#icon-minus" aria-hidden="true"></use>
</svg>
Wie kann ich die Reichweite des Antriebssystems erweitern?
</button>
<div class="highlight-card__content" data-collapse-target>
<p class="highlight-card__text p3">
Du kannst bei Deinem Händler oder in unserem Onlineshop einen zusätzlichen Akku kaufen. Der Akku
hat in etwa die Größe und das Gewicht einer Trinkflasche und lässt sich leicht transportieren.
</p>
</div>
</li>
</ul>
</div>
Source: scss/_3-Components/_highlight-card.scss, line 1
3.14.1 Highlight Card
Template for Highlight, Download Card
Example
evation Original Betriebsanleitung
pdf - 10MB
evation Original Betriebsanleitung
pdf - 10MB
evation Original Betriebsanleitung
pdf - 10MB
Ich bin eine sehr wichtige Anmerkung und ich kann auch länger werden. Der Kasten wächst dann propotional mit. Weit hinten hinter den Wortbergen, fern der Länder Vokalien und Konsonanten.
<div class="grid">
<div class="col-desk-12 col-tab-6 col-mob-6">
<div class="highlight-card highlight-card--download highlight-card--black">
<div class="highlight-card__download">
<a href="" class="highlight-card__link p3">
<svg class="icon"><use xlink:href="#icon-arrow-download" href="#icon-arrow-download" aria-hidden="true"></use></svg>
evation Original Betriebsanleitung</a>
<span class="f1">pdf - 10MB</span>
</div>
</div>
<div class="highlight-card highlight-card--download">
<div class="highlight-card__download">
<a href="" class="highlight-card__link p3">
<svg class="icon"><use xlink:href="#icon-arrow-download" href="#icon-arrow-download" aria-hidden="true"></use></svg>
evation Original Betriebsanleitung</a>
<span class="f1">pdf - 10MB</span>
</div>
</div>
<div class="highlight-card highlight-card--download highlight-card--no-bg">
<div class="highlight-card__download">
<a href="" class="highlight-card__link p3">
<svg class="icon"><use xlink:href="#icon-arrow-download" href="#icon-arrow-download" aria-hidden="true"></use></svg>
evation Original Betriebsanleitung</a>
<span class="f1">pdf - 10MB</span>
</div>
</div>
<div class="highlight-card highlight-card--text">
<p class="highlight-card__text p3">Ich bin eine sehr wichtige Anmerkung und ich kann auch länger werden.
Der Kasten wächst dann propotional mit. Weit hinten hinter den Wortbergen, fern der Länder Vokalien und
Konsonanten.</p>
</div>
</div>
</div>Source: scss/_3-Components/_dealer-card.scss, line 1
3.14.2 Dealer Card
Card template for top dealer
Example
Elektrofahrrad24
<div class="dealer-card__item">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<hr>
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<a class="link-ext" href="#">Kaufen<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>Source: scss/_3-Components/_dealer-card.scss, line 144
3.14.3 Dealer Card in Near
Card template for dealer in near
Example
Elektrofahrrad24
FAZUA Premium Partner
- werden regelmäßig geschult sind und sind echte Experten für das FAZUA Antriebssystem
- haben Ersatzteile auf Lager
- stellen Testräder zur Verfügung
- bieten Service für alle Marken mit Fazua Antrieb
Musterweg 6,
81825 München
Deutschland
www.fahrradxxl.de
Mo – Fr: 9.00 – 18.00
2 km
<div class="dealer-card__item dealer-card__item--big">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<div class="dealer-card__info js--dealer-card-info">
<span class="f2">FAZUA Premium Partner</span>
<button type="button" class="btn btn-link dealer-card__plus">
<svg class="icon"><use xlink:href="#icon-plus" href="#icon-plus" aria-hidden="true"></use></svg>
</button>
<div class="dealer-card__info-text dealer-card__info-text--close">
<ul class="f2">
<li>werden regelmäßig geschult sind und sind echte Experten für das FAZUA Antriebssystem</li>
<li>haben Ersatzteile auf Lager</li>
<li>stellen Testräder zur Verfügung</li>
<li>bieten Service für alle Marken mit Fazua Antrieb</li>
</ul>
</div>
</div>
<hr>
<div class="dealer-card__body">
<p class="p4">
Musterweg 6,<br>
81825 München<br>
Deutschland<br>
www.fahrradxxl.de<br>
Mo – Fr: 9.00 – 18.00
</p>
<div class="dealer-card__distance d-none d-lg-block">
<button type="button" class="btn btn-link dealer-card__pin">
<svg class="icon"><use xlink:href="#icon-pin" href="#icon-pin" aria-hidden="true"></use></svg>
</button>
<span>2 km</span>
</div>
<img class="img-fluid w-100 d-none d-lg-block" src="/placeholder/google-maps.jpg" alt="" style="border: 1px solid #dbdcde;">
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<p class="p4 mb-0">Noch <span>5</span> auf Lager</p>
</div>
</div>
<hr>
<div class="dealer-card__action">
<p class="p4 font-extra-bold">Fahrrad reservieren</p>
<a class="link-ext p4" href="#">+49 89 1745 457<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
<a class="link-ext p4" href="#">fahradccl@gmail.com<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>Example
evation Original Betriebsanleitung
pdf - 10MB
evation Original Betriebsanleitung
pdf - 10MB
evation Original Betriebsanleitung
pdf - 10MB
Ich bin eine sehr wichtige Anmerkung und ich kann auch länger werden. Der Kasten wächst dann propotional mit. Weit hinten hinter den Wortbergen, fern der Länder Vokalien und Konsonanten.
<div class="grid">
<div class="col-desk-12 col-tab-6 col-mob-6">
<div class="highlight-card highlight-card--download highlight-card--black">
<div class="highlight-card__download">
<a href="" class="highlight-card__link p3">
<svg class="icon"><use xlink:href="#icon-arrow-download" href="#icon-arrow-download" aria-hidden="true"></use></svg>
evation Original Betriebsanleitung</a>
<span class="f1">pdf - 10MB</span>
</div>
</div>
<div class="highlight-card highlight-card--download">
<div class="highlight-card__download">
<a href="" class="highlight-card__link p3">
<svg class="icon"><use xlink:href="#icon-arrow-download" href="#icon-arrow-download" aria-hidden="true"></use></svg>
evation Original Betriebsanleitung</a>
<span class="f1">pdf - 10MB</span>
</div>
</div>
<div class="highlight-card highlight-card--download highlight-card--no-bg">
<div class="highlight-card__download">
<a href="" class="highlight-card__link p3">
<svg class="icon"><use xlink:href="#icon-arrow-download" href="#icon-arrow-download" aria-hidden="true"></use></svg>
evation Original Betriebsanleitung</a>
<span class="f1">pdf - 10MB</span>
</div>
</div>
<div class="highlight-card highlight-card--text">
<p class="highlight-card__text p3">Ich bin eine sehr wichtige Anmerkung und ich kann auch länger werden.
Der Kasten wächst dann propotional mit. Weit hinten hinter den Wortbergen, fern der Länder Vokalien und
Konsonanten.</p>
</div>
</div>
</div>Source: scss/_3-Components/slider/_card-slider.scss, line 1
3.15.1 Card Slider
Slider will be shown at tablet breakpoint
Example
<section class="page-section">
<div class="grid justify-content-center">
<div class="col-desk-12 col-tab-5 col-mob-6">
<div class="swiper-container card-slider js--swiper-slider-variant">
<div class="card__wrapper swiper-wrapper">
<div class="swiper-slide card">
<div class="card__item">
<div class="card-body">
<h3 class="card-title">Endurace on: 7.0</h3>
<p class="p4">Shimano GRX Di2</p>
<div class="card__color-wrapper">
<span class="card__color black"></span>
<span class="card__color blue"></span>
<span class="card__color red"></span>
</div>
<hr>
<p class="p4">ab <span class="p3 font-weight-bold">4.009 €</span></p>
<a href="#" class="link-sm">Verfügbarkeit prüfen</a>
</div>
</div>
</div>
<div class="swiper-slide card">
<div class="card__item">
<div class="card-body">
<h3 class="card-title">Endurace on: 8.0</h3>
<p class="p4">Shimano GRX Di2 X345</p>
<div class="card__color-wrapper">
<span class="card__color black"></span>
<span class="card__color blue"></span>
<span class="card__color red"></span>
</div>
<hr>
<p class="p4">ab <span class="p3 font-weight-bold">4.999 €</span></p>
<a href="#" class="link-sm">Verfügbarkeit prüfen</a>
</div>
</div>
</div>
<div class="swiper-slide card">
<div class="card__item">
<div class="card-body">
<h3 class="card-title">Endurace on: 9.0</h3>
<p class="p4">Shimano GRX Di2 X345 X356</p>
<div class="card__color-wrapper">
<span class="card__color black"></span>
<span class="card__color blue"></span>
<span class="card__color red"></span>
</div>
<hr>
<p class="p4">ab <span class="p3 font-weight-bold">5.897 €</span></p>
<a href="#" class="link-sm">Verfügbarkeit prüfen</a>
</div>
</div>
</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
</section>Source: scss/_3-Components/slider/_dealer-slider.scss, line 54
3.15.2 Dealer in near Slider
Slider will be shown at tablet breakpoint
Example
Elektrofahrrad24
FAZUA Premium Partner
- werden regelmäßig geschult sind und sind echte Experten für das FAZUA Antriebssystem
- haben Ersatzteile auf Lager
- stellen Testräder zur Verfügung
- bieten Service für alle Marken mit Fazua Antrieb
Musterweg 6,
81825 München
Deutschland
www.fahrradxxl.de
Mo – Fr: 9.00 – 18.00
2 km
Elektrofahrrad24
FAZUA Premium Partner
- werden regelmäßig geschult sind und sind echte Experten für das FAZUA Antriebssystem
- haben Ersatzteile auf Lager
- stellen Testräder zur Verfügung
- bieten Service für alle Marken mit Fazua Antrieb
Musterweg 6,
81825 München
Deutschland
www.fahrradxxl.de
Mo – Fr: 9.00 – 18.00
2 km
Elektrofahrrad24
Musterweg 6,
81825 München
Deutschland
www.fahrradxxl.de
Mo – Fr: 9.00 – 18.00
2 km
<div class="swiper-container dealer-slider js--swiper-slider-variant">
<div class="dealer-card__wrapper swiper-wrapper">
<div class="swiper-slide dealer-card__item dealer-card__item--big">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<div class="dealer-card__info js--dealer-card-info">
<span class="f2">FAZUA Premium Partner</span>
<button type="button" class="btn btn-link dealer-card__plus">
<svg class="icon"><use xlink:href="#icon-plus" href="#icon-plus" aria-hidden="true"></use></svg>
</button>
<div class="dealer-card__info-text dealer-card__info-text--close">
<ul class="f2">
<li>werden regelmäßig geschult sind und sind echte Experten für das FAZUA Antriebssystem</li>
<li>haben Ersatzteile auf Lager</li>
<li>stellen Testräder zur Verfügung</li>
<li>bieten Service für alle Marken mit Fazua Antrieb</li>
</ul>
</div>
</div>
<hr>
<div class="dealer-card__body">
<p class="p4">
Musterweg 6,<br>
81825 München<br>
Deutschland<br>
www.fahrradxxl.de<br>
Mo – Fr: 9.00 – 18.00
</p>
<div class="dealer-card__distance d-none d-lg-block">
<button type="button" class="btn btn-link dealer-card__pin">
<svg class="icon"><use xlink:href="#icon-pin" href="#icon-pin" aria-hidden="true"></use></svg>
</button>
<span>2 km</span>
</div>
<img class="img-fluid w-100 d-none d-lg-block" src="/placeholder/google-maps.jpg" alt="" style="border: 1px solid #dbdcde;">
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<p class="p4 mb-0">Noch <span>5</span> auf Lager</p>
</div>
</div>
<hr>
<div class="dealer-card__action">
<p class="p4 font-extra-bold">Fahrrad reservieren</p>
<a class="link-ext p4" href="#">+49 89 1745 457<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
<a class="link-ext p4" href="#">fahradccl@gmail.com<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>
<div class="swiper-slide dealer-card__item dealer-card__item--big">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<div class="dealer-card__info js--dealer-card-info">
<span class="f2">FAZUA Premium Partner</span>
<button type="button" class="btn btn-link dealer-card__plus">
<svg class="icon"><use xlink:href="#icon-plus" href="#icon-plus" aria-hidden="true"></use></svg>
</button>
<div class="dealer-card__info-text dealer-card__info-text--close">
<ul class="f2">
<li>werden regelmäßig geschult sind und sind echte Experten für das FAZUA Antriebssystem</li>
<li>haben Ersatzteile auf Lager</li>
<li>stellen Testräder zur Verfügung</li>
<li>bieten Service für alle Marken mit Fazua Antrieb</li>
</ul>
</div>
</div>
<hr>
<div class="dealer-card__body">
<p class="p4">
Musterweg 6,<br>
81825 München<br>
Deutschland<br>
www.fahrradxxl.de<br>
Mo – Fr: 9.00 – 18.00
</p>
<div class="dealer-card__distance d-none d-lg-block">
<button type="button" class="btn btn-link dealer-card__pin">
<svg class="icon"><use xlink:href="#icon-pin" href="#icon-pin" aria-hidden="true"></use></svg>
</button>
<span>2 km</span>
</div>
<img class="img-fluid w-100 d-none d-lg-block" src="/placeholder/google-maps.jpg" alt="" style="border: 1px solid #dbdcde;">
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<p class="p4 mb-0">Noch <span>5</span> auf Lager</p>
</div>
</div>
<hr>
<div class="dealer-card__action">
<p class="p4 font-extra-bold">Fahrrad reservieren</p>
<a class="link-ext p4" href="#">+49 89 1745 457<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
<a class="link-ext p4" href="#">fahradccl@gmail.com<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>
<div class="swiper-slide dealer-card__item dealer-card__item--big">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<hr>
<div class="dealer-card__body">
<p class="p4">
Musterweg 6,<br>
81825 München<br>
Deutschland<br>
www.fahrradxxl.de<br>
Mo – Fr: 9.00 – 18.00
</p>
<div class="dealer-card__distance d-none d-lg-block">
<button type="button" class="btn btn-link dealer-card__pin">
<svg class="icon"><use xlink:href="#icon-pin" href="#icon-pin" aria-hidden="true"></use></svg>
</button>
<span>2 km</span>
</div>
<img class="img-fluid w-100 d-none d-lg-block" src="/placeholder/google-maps.jpg" alt="" style="border: 1px solid #dbdcde;">
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<p class="p4 mb-0">Noch <span>5</span> auf Lager</p>
</div>
</div>
<hr>
<div class="dealer-card__action">
<p class="p4 font-extra-bold">Fahrrad reservieren</p>
<a class="link-ext p4" href="#">+49 89 1745 457<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
<a class="link-ext p4" href="#">fahradccl@gmail.com<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>
</div>
<div class="swiper-scrollbar"></div>
</div>Source: scss/_3-Components/slider/_dealer-slider.scss, line 1
3.15.3 Dealer Slider
Slider will be shown at tablet breakpoint
Example
<div class="swiper-container dealer-slider js--swiper-slider-variant">
<div class="dealer-card__wrapper swiper-wrapper">
<div class="swiper-slide dealer-card__item">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<hr>
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<a class="link-ext" href="#">Kaufen<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>
<div class="swiper-slide dealer-card__item">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<hr>
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<a class="link-ext" href="#">Kaufen<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>
<div class="swiper-slide dealer-card__item">
<div class="dealer-card__box">
<h3>Elektrofahrrad24</h3>
<hr>
<div class="dealer-card__footer">
<div class="dealer-card__price">
<span class="h4">4.999 €</span>
<span class="f2">incl. MwSt</span>
</div>
<a class="link-ext" href="#">Kaufen<svg class="icon"><use xlink:href="#icon-arrow-right" href="#icon-arrow-right" aria-hidden="true"></use></svg></a>
</div>
</div>
</div>
</div>
<div class="swiper-scrollbar"></div>
</div>