Document Slider

No notes defined.

<section class="sds-section -sectionSunken -overflowHidden">
    <div class="sds-section__innerWrapper">
        <div class="sds-section__inner">
            <div class="container">
                <div class="sds-stack3xl">
                    <div class="row no-bottom-gutter justify-content-between">
                        <div class="col col-lg-8 col-xl-6">
                            <div class="sds-stack3xl">
                                <h2 class="h2">Dépliants</h2>
                            </div>
                        </div>
                        <div class="col-auto sds-relatedArticles__headerBtn">
                            <a href="" class="sds-btn -btnSecondary -btnInverse">

                                <span class="sds-btn__text">Découvrez tous nos articles</span>

                                <span class="sds-icon sds-icon-arrownext"></span>

                            </a>
                        </div>
                    </div>
                    <div class="sds-documentSlider sds-slider -overflowVisible -inverted">

                        <!-- adjust row class for spacing between slides here -->
                        <div class="row no-bottom-gutter align-items-start">

                            <div class="sds-slider__inner swiper" data-swiper>

                                <!-- Additional required wrapper -->
                                <!-- adjust row class for spacing between slides here -->
                                <ul class="swiper-wrapper row flex-nowrap align-items-stretch-immediate no-bottom-gutter list-unstyled">
                                    <!-- Slides -->

                                    <li class="swiper-slide col">
                                        <div class="sds-document sds-box -column sds-scaleInteraction">
                                            <div class="sds-document__imgContainer">

                                                <img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">

                                            </div>
                                            <div class="sds-document__body">
                                                <div class="sds-stackXs">
                                                    <h3 class="h3">Document 1</h3>
                                                    <p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
                                                </div>
                                                <div class="sds-document__actionZone">
                                                    <span class="sds-document__meta sds-textHelperSmall">{Size}</span>
                                                    <a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">

                                                        <span class="sds-btn__text">Télécharger</span>

                                                        <span class="sds-icon sds-icon-download"></span>

                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="swiper-slide col">
                                        <div class="sds-document sds-box -column sds-scaleInteraction">
                                            <div class="sds-document__imgContainer">

                                                <img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">

                                            </div>
                                            <div class="sds-document__body">
                                                <div class="sds-stackXs">
                                                    <h3 class="h3">Document 2</h3>
                                                    <p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
                                                </div>
                                                <div class="sds-document__actionZone">
                                                    <span class="sds-document__meta sds-textHelperSmall">{Size}</span>
                                                    <a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">

                                                        <span class="sds-btn__text">Télécharger</span>

                                                        <span class="sds-icon sds-icon-download"></span>

                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="swiper-slide col">
                                        <div class="sds-document sds-box -column sds-scaleInteraction">
                                            <div class="sds-document__imgContainer">

                                                <img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">

                                            </div>
                                            <div class="sds-document__body">
                                                <div class="sds-stackXs">
                                                    <h3 class="h3">Document 3</h3>
                                                    <p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
                                                </div>
                                                <div class="sds-document__actionZone">
                                                    <span class="sds-document__meta sds-textHelperSmall">{Size}</span>
                                                    <a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">

                                                        <span class="sds-btn__text">Télécharger</span>

                                                        <span class="sds-icon sds-icon-download"></span>

                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="swiper-slide col">
                                        <div class="sds-document sds-box -column sds-scaleInteraction">
                                            <div class="sds-document__imgContainer">

                                                <img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">

                                            </div>
                                            <div class="sds-document__body">
                                                <div class="sds-stackXs">
                                                    <h3 class="h3">Document 4</h3>
                                                    <p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
                                                </div>
                                                <div class="sds-document__actionZone">
                                                    <span class="sds-document__meta sds-textHelperSmall">{Size}</span>
                                                    <a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">

                                                        <span class="sds-btn__text">Télécharger</span>

                                                        <span class="sds-icon sds-icon-download"></span>

                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="swiper-slide col">
                                        <div class="sds-document sds-box -column sds-scaleInteraction">
                                            <div class="sds-document__imgContainer">

                                                <img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">

                                            </div>
                                            <div class="sds-document__body">
                                                <div class="sds-stackXs">
                                                    <h3 class="h3">Document 5</h3>
                                                    <p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
                                                </div>
                                                <div class="sds-document__actionZone">
                                                    <span class="sds-document__meta sds-textHelperSmall">{Size}</span>
                                                    <a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">

                                                        <span class="sds-btn__text">Télécharger</span>

                                                        <span class="sds-icon sds-icon-download"></span>

                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="swiper-slide col">
                                        <div class="sds-document sds-box -column sds-scaleInteraction">
                                            <div class="sds-document__imgContainer">

                                                <img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">

                                            </div>
                                            <div class="sds-document__body">
                                                <div class="sds-stackXs">
                                                    <h3 class="h3">Document 6</h3>
                                                    <p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
                                                </div>
                                                <div class="sds-document__actionZone">
                                                    <span class="sds-document__meta sds-textHelperSmall">{Size}</span>
                                                    <a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">

                                                        <span class="sds-btn__text">Télécharger</span>

                                                        <span class="sds-icon sds-icon-download"></span>

                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="swiper-slide col">
                                        <div class="sds-document sds-box -column sds-scaleInteraction">
                                            <div class="sds-document__imgContainer">

                                                <img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">

                                            </div>
                                            <div class="sds-document__body">
                                                <div class="sds-stackXs">
                                                    <h3 class="h3">Document 7</h3>
                                                    <p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
                                                </div>
                                                <div class="sds-document__actionZone">
                                                    <span class="sds-document__meta sds-textHelperSmall">{Size}</span>
                                                    <a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">

                                                        <span class="sds-btn__text">Télécharger</span>

                                                        <span class="sds-icon sds-icon-download"></span>

                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="swiper-slide col">
                                        <div class="sds-document sds-box -column sds-scaleInteraction">
                                            <div class="sds-document__imgContainer">

                                                <img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">

                                            </div>
                                            <div class="sds-document__body">
                                                <div class="sds-stackXs">
                                                    <h3 class="h3">Document 8</h3>
                                                    <p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
                                                </div>
                                                <div class="sds-document__actionZone">
                                                    <span class="sds-document__meta sds-textHelperSmall">{Size}</span>
                                                    <a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">

                                                        <span class="sds-btn__text">Télécharger</span>

                                                        <span class="sds-icon sds-icon-download"></span>

                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="swiper-slide col">
                                        <div class="sds-document sds-box -column sds-scaleInteraction">
                                            <div class="sds-document__imgContainer">

                                                <img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">

                                            </div>
                                            <div class="sds-document__body">
                                                <div class="sds-stackXs">
                                                    <h3 class="h3">Document 9</h3>
                                                    <p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
                                                </div>
                                                <div class="sds-document__actionZone">
                                                    <span class="sds-document__meta sds-textHelperSmall">{Size}</span>
                                                    <a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">

                                                        <span class="sds-btn__text">Télécharger</span>

                                                        <span class="sds-icon sds-icon-download"></span>

                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="swiper-slide col">
                                        <div class="sds-document sds-box -column sds-scaleInteraction">
                                            <div class="sds-document__imgContainer">

                                                <img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">

                                            </div>
                                            <div class="sds-document__body">
                                                <div class="sds-stackXs">
                                                    <h3 class="h3">Document 10</h3>
                                                    <p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
                                                </div>
                                                <div class="sds-document__actionZone">
                                                    <span class="sds-document__meta sds-textHelperSmall">{Size}</span>
                                                    <a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">

                                                        <span class="sds-btn__text">Télécharger</span>

                                                        <span class="sds-icon sds-icon-download"></span>

                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="swiper-slide col">
                                        <div class="sds-document sds-box -column sds-scaleInteraction">
                                            <div class="sds-document__imgContainer">

                                                <img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">

                                            </div>
                                            <div class="sds-document__body">
                                                <div class="sds-stackXs">
                                                    <h3 class="h3">Document 11</h3>
                                                    <p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
                                                </div>
                                                <div class="sds-document__actionZone">
                                                    <span class="sds-document__meta sds-textHelperSmall">{Size}</span>
                                                    <a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">

                                                        <span class="sds-btn__text">Télécharger</span>

                                                        <span class="sds-icon sds-icon-download"></span>

                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="swiper-slide col">
                                        <div class="sds-document sds-box -column sds-scaleInteraction">
                                            <div class="sds-document__imgContainer">

                                                <img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">

                                            </div>
                                            <div class="sds-document__body">
                                                <div class="sds-stackXs">
                                                    <h3 class="h3">Document 12</h3>
                                                    <p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
                                                </div>
                                                <div class="sds-document__actionZone">
                                                    <span class="sds-document__meta sds-textHelperSmall">{Size}</span>
                                                    <a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">

                                                        <span class="sds-btn__text">Télécharger</span>

                                                        <span class="sds-icon sds-icon-download"></span>

                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>

                                <!-- adjust row class for spacing between slides here -->
                                <nav class="sds-documentSlider__navigation  sds-slider__navigation row">
                                    <div class="col">
                                        <div class="sds-slider__pagination swiper-pagination"></div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="sds-btnGroup">
                                            <button type="button" class="sds-slider__prev swiper-button-prev">
                                                <span class="sds-icon sds-icon-arrowprevious"></span>
                                            </button>
                                            <button type="button" class="sds-slider__next swiper-button-next">
                                                <span class="sds-icon sds-icon-arrownext"></span>
                                            </button>
                                        </div>
                                    </div>
                                </nav>

                            </div>

                        </div>

                    </div>
                    <div class="sds-relatedArticles__footerBtn sds-exceptionStackXxl">
                        <a href="" class="sds-btn -btnSecondary -btnInverse">

                            <span class="sds-btn__text">Découvrez tous nos articles</span>

                            <span class="sds-icon sds-icon-arrownext"></span>

                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="{{ namespace }}section -sectionSunken -overflowHidden">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container">
				<div class="{{ namespace }}stack3xl{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
					<div class="row no-bottom-gutter justify-content-between">
						<div class="col col-lg-8 col-xl-6">
							<div class="{{ namespace }}stack3xl">
								<h2 class="h2">Dépliants</h2>
							</div>
						</div>
						<div class="col-auto {{ namespace }}relatedArticles__headerBtn">
							{% render "@btn-secondary-inverse--icon-right",{
								eltType: "a",
								text: "Découvrez tous nos articles",
								icon: "icon-arrownext"
							},true %}
						</div>
					</div>
					{% render "@spk-slider--documents",{
						classes: ["-inverted"]
					},true %}
					<div class="{{ namespace }}relatedArticles__footerBtn {{ namespace }}exceptionStackXxl">
						{% render "@btn-secondary-inverse--icon-right",{
							eltType: "a",
							text: "Découvrez tous nos articles",
							icon: "icon-arrownext"
						},true %}
					</div>
				</div>
			</div>
		</div>
	</div>
</section>