Source: scss/_3-Components/_aggregator.scss, line 170
3.10.2 Extended Modal
Template for extended Modal
FAZUA Living Styleguide
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>