Slider
Insgesamt bietet ein Slider eine attraktive Möglichkeit, Inhalte zu präsentieren, die Aufmerksamkeit der Benutzer zu erfassen und ihnen eine interaktive Möglichkeit zu bieten, durch verschiedene Themen zu navigieren.
Ein Slider bildet beliebig viele Cards ab
Ein Slider ermöglicht es, mehrere Cards auf einer begrenzten Fläche anzuzeigen, ohne dass der Benutzer scrollen muss. Dies ist besonders nützlich für Websites mit begrenztem Platzangebot, z. B. auf der Startseite oder auf Landing-Pages.
Ein Slider ermöglicht es, verschiedene Schlüsselbotschaften hervorzuheben, indem sie nacheinander präsentiert werden. Dies ist besonders nützlich um mehrere Produkte oder Dienstleistungen abbilden zu können.
Hero Slider
Der Hero Slider kommt immer direkt nach der Navigation auf den Startseiten zum Einsatz und befindet sich immer auf einer Farbfläche. Die Hero Slider besteht aus folgenden Elementen:
- Headline (Styling H1)
- Cards
- Pfeile als Interaktionselement
- Indikator zur Orientierung
- Farbbalken aus Bereich (via Styling Klasse)
- Hintergrundfarbe aus Bereich (via Styling Klasse)
Headline
<h1>Headline</h1><div id="heroSlider" class="swiper slider slider-hero"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="card card-hero bg-dark text-white"> <picture> <source media="(max-width: 375px)" srcset=" https://picsum.photos/702/394?random=1/ 2x, https://picsum.photos/351/197?random=1/ 1x " type="image/jpeg" /> <source media="(max-width: 390px)" srcset=" https://picsum.photos/732/410?random=1/ 2x, https://picsum.photos/366/205?random=1/ 1x " type="image/jpeg" /> <source media="(max-width: 414px)" srcset=" https://picsum.photos/780/438?random=1/ 2x, https://picsum.photos/390/219?random=1/ 1x " type="image/jpeg" /> <source media="(max-width: 428px)" srcset=" https://picsum.photos/808/454?random=1/ 2x, https://picsum.photos/404/227?random=1/ 1x " type="image/jpeg" /> <source media="(max-width: 559px)" srcset=" https://picsum.photos/1070/600?random=1/ 2x, https://picsum.photos/535/300?random=1/ 1x " type="image/jpeg" /> <source media="(max-width: 799px)" srcset=" https://picsum.photos/912/512?random=1/ 2x, https://picsum.photos/456/256?random=1/ 1x " type="image/jpeg" /> <source media="(max-width: 991px)" srcset=" https://picsum.photos/1392/782?random=1/ 2x, https://picsum.photos/696/391?random=1/ 1x " type="image/jpeg" /> <source media="(max-width: 1229px)" srcset=" https://picsum.photos/1776/574?random=1/ 2x, https://picsum.photos/888/287?random=1/ 1x " type="image/jpeg" /> <source media="(max-width: 1423px)" srcset=" https://picsum.photos/2256/730?random=1/ 2x, https://picsum.photos/1128/365?random=1/ 1x " type="image/jpeg" /> <img src="https://picsum.photos/1320/427?random=1" class="card-img" alt="Alt" /> </picture> <div class="card-img-overlay d-flex flex-grow-1 bg--white bl--purple-primary" > <div class="flex-grow-1 mt-auto"> <p><span class="label">Label Text</span></p> <h2 class="card-title"> <span ><a href="#" >Geografisches Informationssystem - Neu und exklusiv für Mitglieder</a ></span > </h2> </div> </div> </div> </div> <div class="swiper-slide"> <div class="card card-hero bg-dark text-white"> <picture> <source media="(max-width: 375px)" srcset=" https://picsum.photos/702/394?random=2/ 2x, https://picsum.photos/351/197?random=2/ 1x " type="image/jpeg" /> <source media="(max-width: 390px)" srcset=" https://picsum.photos/732/410?random=2/ 2x, https://picsum.photos/366/205?random=2/ 1x " type="image/jpeg" /> <source media="(max-width: 414px)" srcset=" https://picsum.photos/780/438?random=2/ 2x, https://picsum.photos/390/219?random=2/ 1x " type="image/jpeg" /> <source media="(max-width: 428px)" srcset=" https://picsum.photos/808/454?random=2/ 2x, https://picsum.photos/404/227?random=2/ 1x " type="image/jpeg" /> <source media="(max-width: 559px)" srcset=" https://picsum.photos/1070/600?random=2/ 2x, https://picsum.photos/535/300?random=2/ 1x " type="image/jpeg" /> <source media="(max-width: 799px)" srcset=" https://picsum.photos/912/512?random=2/ 2x, https://picsum.photos/456/256?random=2/ 1x " type="image/jpeg" /> <source media="(max-width: 991px)" srcset=" https://picsum.photos/1392/782?random=2/ 2x, https://picsum.photos/696/391?random=2/ 1x " type="image/jpeg" /> <source media="(max-width: 1229px)" srcset=" https://picsum.photos/1776/574?random=2/ 2x, https://picsum.photos/888/287?random=2/ 1x " type="image/jpeg" /> <source media="(max-width: 1423px)" srcset=" https://picsum.photos/2256/730?random=2/ 2x, https://picsum.photos/1128/365?random=2/ 1x " type="image/jpeg" /> <img src="https://picsum.photos/1320/427?random=2" class="card-img" alt="Alt" /> </picture> <div class="card-img-overlay d-flex flex-grow-1 bg--white bl--brown-primary" > <div class="flex-grow-1 mt-auto"> <p><span class="label">Label Text</span></p> <h2 class="card-title"> <span ><a href="#" >Geografisches Informationssystem - Neu und exklusiv für Mitglieder</a ></span > </h2> </div> </div> </div> </div> <div class="swiper-slide"> <div class="card card-hero bg-dark text-white"> <picture> <source media="(max-width: 375px)" srcset=" https://picsum.photos/702/394?random=3/ 2x, https://picsum.photos/351/197?random=3/ 1x " type="image/jpeg" /> <source media="(max-width: 390px)" srcset=" https://picsum.photos/732/410?random=3/ 2x, https://picsum.photos/366/205?random=3/ 1x " type="image/jpeg" /> <source media="(max-width: 414px)" srcset=" https://picsum.photos/780/438?random=3/ 2x, https://picsum.photos/390/219?random=3/ 1x " type="image/jpeg" /> <source media="(max-width: 428px)" srcset=" https://picsum.photos/808/454?random=3/ 2x, https://picsum.photos/404/227?random=3/ 1x " type="image/jpeg" /> <source media="(max-width: 559px)" srcset=" https://picsum.photos/1070/600?random=3/ 2x, https://picsum.photos/535/300?random=3/ 1x " type="image/jpeg" /> <source media="(max-width: 799px)" srcset=" https://picsum.photos/912/512?random=3/ 2x, https://picsum.photos/456/256?random=3/ 1x " type="image/jpeg" /> <source media="(max-width: 991px)" srcset=" https://picsum.photos/1392/782?random=3/ 2x, https://picsum.photos/696/391?random=3/ 1x " type="image/jpeg" /> <source media="(max-width: 1229px)" srcset=" https://picsum.photos/1776/574?random=3/ 2x, https://picsum.photos/888/287?random=3/ 1x " type="image/jpeg" /> <source media="(max-width: 1423px)" srcset=" https://picsum.photos/2256/730?random=3/ 2x, https://picsum.photos/1128/365?random=3/ 1x " type="image/jpeg" /> <img src="https://picsum.photos/1320/427?random=3" class="card-img" alt="Alt" /> </picture> <div class="card-img-overlay d-flex flex-grow-1 bg--white bl--green-primary" > <div class="flex-grow-1 mt-auto"> <p><span class="label">Label Text</span></p> <h2 class="card-title"> <span ><a href="#" >Geografisches Informationssystem - Neu und exklusiv für Mitglieder</a ></span > </h2> </div> </div> </div> </div> </div> <div class="row align-items-center mt-3"> <div class="col"><div class="swiper-scrollbar"></div></div> <div class="col-auto d-flex"> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div></div>Cards Slider
Der Cards Slider ist eine Variante und kommt auf Startseiten, jedoch nie als Hero, zum Einsatz. Der Slider befindet sich immer auf einer Farbfläche und besteht aus folgenden Elementen:
- Headline (Styling H2)
- Cards
- Pfeile als Interaktionselement
- Indikator zur Orientierung
- Hintergrundfarbe aus Bereich (via Styling Klasse)
Headline
Card-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter.
160 Zeichen sind 23 Wörter. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.
Card-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter.
160 Zeichen sind 23 Wörter. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.
Card-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter.
160 Zeichen sind 23 Wörter. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.
Card-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter.
160 Zeichen sind 23 Wörter. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.
<h2>Headline</h2><div id="cardsSlider" class="swiper slider slider-columns slider-cards"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="card card--image-title-sutitle"> <img class="card-img" srcset=" https://picsum.photos/id/534/560/319 560w, https://picsum.photos/id/534/848/476 848w, https://picsum.photos/id/534/1070/600 1070w " sizes="(min-width:1424px)424px, (min-width:1230px)360px, (min-width:992px)280px, (min-width:800px)336px, (min-width:560px)456px, calc(100vw-1.5rem)" src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" /> <div class="card-body"> <h3 class="card-title h4"> <a href="#" >Card-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter.</a > </h3> <p> 160 Zeichen sind 23 Wörter. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. </p> </div> </div> </div> <div class="swiper-slide"> <div class="card card--image-title-sutitle"> <img class="card-img" srcset=" https://picsum.photos/id/534/560/319 560w, https://picsum.photos/id/534/848/476 848w, https://picsum.photos/id/534/1070/600 1070w " sizes="(min-width:1424px)424px, (min-width:1230px)360px, (min-width:992px)280px, (min-width:800px)336px, (min-width:560px)456px, calc(100vw-1.5rem)" src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" /> <div class="card-body"> <h3 class="card-title h4"> <a href="#" >Card-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter.</a > </h3> <p> 160 Zeichen sind 23 Wörter. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. </p> </div> </div> </div> <div class="swiper-slide"> <div class="card card--image-title-sutitle"> <img class="card-img" srcset=" https://picsum.photos/id/534/560/319 560w, https://picsum.photos/id/534/848/476 848w, https://picsum.photos/id/534/1070/600 1070w " sizes="(min-width:1424px)424px, (min-width:1230px)360px, (min-width:992px)280px, (min-width:800px)336px, (min-width:560px)456px, calc(100vw-1.5rem)" src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" /> <div class="card-body"> <h3 class="card-title h4"> <a href="#" >Card-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter.</a > </h3> <p> 160 Zeichen sind 23 Wörter. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. </p> </div> </div> </div> <div class="swiper-slide"> <div class="card card--image-title-sutitle"> <img class="card-img" srcset=" https://picsum.photos/id/534/560/319 560w, https://picsum.photos/id/534/848/476 848w, https://picsum.photos/id/534/1070/600 1070w " sizes="(min-width:1424px)424px, (min-width:1230px)360px, (min-width:992px)280px, (min-width:800px)336px, (min-width:560px)456px, calc(100vw-1.5rem)" src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" /> <div class="card-body"> <h3 class="card-title h4"> <a href="#" >Card-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter.</a > </h3> <p> 160 Zeichen sind 23 Wörter. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. </p> </div> </div> </div> </div> <div class="row align-items-center mt-3"> <div class="col"><div class="swiper-scrollbar"></div></div> <div class="col-auto d-flex"> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div></div>Veranstaltungen Slider
Der Slider für Veranstaltungen wird ausschließlich auf der Startseite der Veranstaltungen platziert und dient als das Hero Element am oberen Seitenrand. Er ist immer vor einem farbigen Hintergrund positioniert und besteht aus den folgenden Komponenten:
- Headline (Styling H1)
- Cards
- Pfeile als Interaktionselement
- Indikator zur Orientierung
- Hintergrundfarbe aus Bereich (via Styling Klasse)
Headline
- Wochentag
- Mo
- Tag
- 01
- Monat
- Jan
Online
Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card.
Ausgebucht
Anmelden- Wochentag
- Mo
- Tag
- 01
- Monat
- Jan
Online
Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card.
Ausgebucht
Anmelden- Wochentag
- Mo
- Tag
- 01
- Monat
- Jan
Online
Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card.
Ausgebucht
Anmelden- Wochentag
- Mo
- Tag
- 01
- Monat
- Jan
Online
Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card.
Ausgebucht
Anmelden<h2>Headline</h2><div id="cardsSlider" class="swiper slider slider-columns slider-cards"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="card card-eventbox"> <div class="card-header"> <dl> <dt class="visually-hidden">Wochentag</dt> <dd class="h6">Mo</dd> <dt class="visually-hidden">Tag</dt> <dd class="c--wko-red h3">01</dd> <dt class="visually-hidden">Monat</dt> <dd class="h6">Jan</dd> </dl> <div class="badge rounded-pill bg--webinar-blue">Online</div> </div> <img class="card-img" srcset=" https://picsum.photos/id/534/560/319 560w, https://picsum.photos/id/534/848/476 848w, https://picsum.photos/id/534/1070/600 1070w " sizes="(min-width:1424px)424px, (min-width:1230px)360px, (min-width:992px)280px, (min-width:800px)336px, (min-width:560px)456px, calc(100vw-1.5rem)" src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" /> <div class="card-body bg--duck-egg-green-secondary"> <h3 class="card-title h4"> Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card. </h3> <p class="card-info h6">Ausgebucht</p> <a class="btn btn-link" href="#"> Anmelden <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div> </div> </div> <div class="swiper-slide"> <div class="card card-eventbox"> <div class="card-header"> <dl> <dt class="visually-hidden">Wochentag</dt> <dd class="h6">Mo</dd> <dt class="visually-hidden">Tag</dt> <dd class="c--wko-red h3">01</dd> <dt class="visually-hidden">Monat</dt> <dd class="h6">Jan</dd> </dl> <div class="badge rounded-pill bg--webinar-blue">Online</div> </div> <img class="card-img" srcset=" https://picsum.photos/id/534/560/319 560w, https://picsum.photos/id/534/848/476 848w, https://picsum.photos/id/534/1070/600 1070w " sizes="(min-width:1424px)424px, (min-width:1230px)360px, (min-width:992px)280px, (min-width:800px)336px, (min-width:560px)456px, calc(100vw-1.5rem)" src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" /> <div class="card-body bg--duck-egg-green-secondary"> <h3 class="card-title h4"> Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card. </h3> <p class="card-info h6">Ausgebucht</p> <a class="btn btn-link" href="#"> Anmelden <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div> </div> </div> <div class="swiper-slide"> <div class="card card-eventbox"> <div class="card-header"> <dl> <dt class="visually-hidden">Wochentag</dt> <dd class="h6">Mo</dd> <dt class="visually-hidden">Tag</dt> <dd class="c--wko-red h3">01</dd> <dt class="visually-hidden">Monat</dt> <dd class="h6">Jan</dd> </dl> <div class="badge rounded-pill bg--webinar-blue">Online</div> </div> <img class="card-img" srcset=" https://picsum.photos/id/534/560/319 560w, https://picsum.photos/id/534/848/476 848w, https://picsum.photos/id/534/1070/600 1070w " sizes="(min-width:1424px)424px, (min-width:1230px)360px, (min-width:992px)280px, (min-width:800px)336px, (min-width:560px)456px, calc(100vw-1.5rem)" src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" /> <div class="card-body bg--duck-egg-green-secondary"> <h3 class="card-title h4"> Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card. </h3> <p class="card-info h6">Ausgebucht</p> <a class="btn btn-link" href="#"> Anmelden <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div> </div> </div> <div class="swiper-slide"> <div class="card card-eventbox"> <div class="card-header"> <dl> <dt class="visually-hidden">Wochentag</dt> <dd class="h6">Mo</dd> <dt class="visually-hidden">Tag</dt> <dd class="c--wko-red h3">01</dd> <dt class="visually-hidden">Monat</dt> <dd class="h6">Jan</dd> </dl> <div class="badge rounded-pill bg--webinar-blue">Online</div> </div> <img class="card-img" srcset=" https://picsum.photos/id/534/560/319 560w, https://picsum.photos/id/534/848/476 848w, https://picsum.photos/id/534/1070/600 1070w " sizes="(min-width:1424px)424px, (min-width:1230px)360px, (min-width:992px)280px, (min-width:800px)336px, (min-width:560px)456px, calc(100vw-1.5rem)" src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" /> <div class="card-body bg--duck-egg-green-secondary"> <h3 class="card-title h4"> Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card. </h3> <p class="card-info h6">Ausgebucht</p> <a class="btn btn-link" href="#"> Anmelden <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div> </div> </div> </div> <div class="row align-items-center mt-3"> <div class="col"><div class="swiper-scrollbar"></div></div> <div class="col-auto d-flex"> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div></div>Icon Cards Slider
Der Cards Slider kommt auf Startseiten, jedoch nie als Hero, zum Einsatz. Der Slider befindet sich immer auf einer Farbfläche und besteht aus folgenden Elementen:
- Headline (Styling H2)
- Icon Cards
- Pfeile als Interaktionselement
- Indikator zur Orientierung
- Hintergrundfarbe (optional)
<h2>Headline</h2><div id="cardsSlider" class="swiper slider slider-columns slider-icon-cards"> <div class="swiper-wrapper"> <div class="swiper-slide"> <article class="card card--icon"> <div class="card-body bg--brown-secondary"> <p class="h6">AW Servicefelder</p> <h3 class="card-title h4">Information & Expertise</h3> <div class="rounded-circle"> <svg class="icon icon-thema-arbeitsrecht"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-thema-arbeitsrecht" ></use> </svg> </div> <a class="btn btn-secondary" href="#"> CTA Secondary </a> </div> </article> </div> <div class="swiper-slide"> <article class="card card--icon"> <div class="card-body bg--brown-secondary"> <p class="h6">AW Servicefelder</p> <h3 class="card-title h4">Information & Expertise</h3> <div class="rounded-circle"> <svg class="icon icon-thema-arbeitsrecht"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-thema-arbeitsrecht" ></use> </svg> </div> <a class="btn btn-secondary" href="#"> CTA Secondary </a> </div> </article> </div> <div class="swiper-slide"> <article class="card card--icon"> <div class="card-body bg--brown-secondary"> <p class="h6">AW Servicefelder</p> <h3 class="card-title h4">Information & Expertise</h3> <div class="rounded-circle"> <svg class="icon icon-thema-arbeitsrecht"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-thema-arbeitsrecht" ></use> </svg> </div> <a class="btn btn-secondary" href="#"> CTA Secondary </a> </div> </article> </div> <div class="swiper-slide"> <article class="card card--icon"> <div class="card-body bg--brown-secondary"> <p class="h6">AW Servicefelder</p> <h3 class="card-title h4">Information & Expertise</h3> <div class="rounded-circle"> <svg class="icon icon-thema-arbeitsrecht"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-thema-arbeitsrecht" ></use> </svg> </div> <a class="btn btn-secondary" href="#"> CTA Secondary </a> </div> </article> </div> <div class="swiper-slide"> <article class="card card--icon"> <div class="card-body bg--brown-secondary"> <p class="h6">AW Servicefelder</p> <h3 class="card-title h4">Information & Expertise</h3> <div class="rounded-circle"> <svg class="icon icon-thema-arbeitsrecht"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-thema-arbeitsrecht" ></use> </svg> </div> <a class="btn btn-secondary" href="#"> CTA Secondary </a> </div> </article> </div> </div> <div class="row align-items-center mt-3"> <div class="col"><div class="swiper-scrollbar"></div></div> <div class="col-auto d-flex"> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div></div>Icon Cards Small Slider
Dieser Slider kommt auf Startseiten, jedoch nie als Hero, zum Einsatz und primär für eServices verwendet. Der Slider befindet sich immer auf einer Farbfläche und besteht aus folgenden Elementen:
- Headline (Styling H2)
- Cards Small
- Pfeile als Interaktionselement
- Indikator zur Orientierung
- Hintergrundfarbe (optional)
<h2>Headline</h2><div id="cardsSlider" class="swiper slider slider-columns slider-icon-cards-small"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="card card--small-icon card-small-icon-eservice"> <div class="card-body bg--peach-secondary"> <a class="btn like"> <svg class="icon icon-favorite"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-favorite" ></use> </svg> </a> <div> <svg class="icon icon-thema-arbeitsrecht"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-thema-arbeitsrecht" ></use> </svg> <p class="h6">Label Versal Text</p> </div> <div class="row"> <div class="col content d-flex flex-column"> <h3 class="card-title h4"> <a href="#" >55 Zeichen, ca. 9 Wörter, natoque penatibus et magnis.</a > </h3> <p class="subtext"> Sub-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter. </p> </div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="card card--small-icon card-small-icon-eservice"> <div class="card-body bg--peach-secondary"> <a class="btn like"> <svg class="icon icon-favorite"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-favorite" ></use> </svg> </a> <div> <svg class="icon icon-thema-arbeitsrecht"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-thema-arbeitsrecht" ></use> </svg> <p class="h6">Label Versal Text</p> </div> <div class="row"> <div class="col content d-flex flex-column"> <h3 class="card-title h4"> <a href="#" >55 Zeichen, ca. 9 Wörter, natoque penatibus et magnis.</a > </h3> <p class="subtext"> Sub-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter. </p> </div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="card card--small-icon card-small-icon-eservice"> <div class="card-body bg--peach-secondary"> <a class="btn like"> <svg class="icon icon-favorite"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-favorite" ></use> </svg> </a> <div> <svg class="icon icon-thema-arbeitsrecht"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-thema-arbeitsrecht" ></use> </svg> <p class="h6">Label Versal Text</p> </div> <div class="row"> <div class="col content d-flex flex-column"> <h3 class="card-title h4"> <a href="#" >55 Zeichen, ca. 9 Wörter, natoque penatibus et magnis.</a > </h3> <p class="subtext"> Sub-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter. </p> </div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="card card--small-icon card-small-icon-eservice"> <div class="card-body bg--peach-secondary"> <a class="btn like"> <svg class="icon icon-favorite"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-favorite" ></use> </svg> </a> <div> <svg class="icon icon-thema-arbeitsrecht"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-thema-arbeitsrecht" ></use> </svg> <p class="h6">Label Versal Text</p> </div> <div class="row"> <div class="col content d-flex flex-column"> <h3 class="card-title h4"> <a href="#" >55 Zeichen, ca. 9 Wörter, natoque penatibus et magnis.</a > </h3> <p class="subtext"> Sub-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter. </p> </div> </div> </div> </div> </div> </div> <div class="row align-items-center mt-3"> <div class="col"><div class="swiper-scrollbar"></div></div> <div class="col-auto d-flex"> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div></div>