Label Versal Text
Cards
Cards enthalten Inhalte und Funktionen zu einem einzelnen Thema und können als Teaser für weitere Inhalte dienen. Sie zeigen wahlweise Text, Icons, ein Bild oder Video, Links – allein oder in Kombination.
Card mit Interaktionen
Cards können neben Text und Bildern interaktive Elemente wie Buttons, Text Buttons oder Textlinks enthalten. Cards können alle den definierten Hintergrund erhalten. Veranstaltungen erhalten die definierte Farbe von Veranstaltungen.
Standard Card, Standard Card mit Datum, Manuelle Card, Card mit Bild, Titel und Untertitel, Card mit Hintergrundfarbe, Carf für Online Veranstaltungen, Card für Veranstaltung Vorort, Card für WIFI Veranstaltung, Card Small, Card Small Icon, Card eService und Card Hero, werden ausschließlich in einem mehrspaltigen Layout verwendet.
01.01.2024
Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card.
Button LinkLabel Versal Text
Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card.
Button Link
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.
Label Versal Text
Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card.
Button Link- 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.
Label Versal Text
Anmelden- Wochentag
- Mo
- Tag
- 01
- Monat
- Jan
- Wochentag
- Mo
- Tag
- 01
- Monat
- Jan
Standard Card (Card Startseiten)
Diese Card kommt ausschließlich auf den Startseiten zum Einsatz und befindet sich immer auf einer Farbfläche. Die Card besteht aus folgenden Elementen:
- Bild
- Kopfzeile
- Titel
- Button Link
- Farbleiste aus Bereich
Label Versal Text
Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card.
Button Link<article class="card card--standard"> <img class="card-img lazyload" data-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" data-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)" data-src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><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" /></noscript> <div class="card-body bl--warm-grey-primary"> <p class="h6">Label Versal Text</p> <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> <a class="btn btn-link" href="#"> Button Link <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div></article>Standard Card mit Datum
Diese Card kommt ausschließlich auf den Startseiten zum Einsatz und befindet sich immer auf einer Farbfläche. Die Card besteht aus folgenden Elementen:
- Bild
- Datum
- Titel
- Button Link
- Farbleiste aus Bereich
01.01.2024
Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card.
Button Link<article class="card card--image-date"> <img class="card-img lazyload" data-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" data-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)" data-src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><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" /></noscript> <div class="card-body bl--fresh-mint-primary"> <p class="h6">01.01.2024</p> <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> <a class="btn btn-link" href="#"> Button Link <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div></article>Manuelle Card
Diese Card befindet sich immer auf einer Farbfläche. Die Card besteht aus folgenden Elementen:
- Bild
- Kopfzeile
- Titel
- Button Link
Label Versal Text
Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card.
Button Link<article class="card card--manuell bg--white"> <img class="card-img lazyload" data-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" data-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)" data-src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><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" /></noscript> <div class="card-body"> <p class="h6">Label Versal Text</p> <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> <a class="btn btn-link" href="#"> Button Link <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div></article>Card mit Bild, Titel und Untertitel
Diese Card befindet sich immer auf einer Farbfläche oder einem Hintergrundbild. Die Card besteht aus folgenden Elementen:
- Bild
- Titel
- Untertitel
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.
<div class="card card--image-title-sutitle"> <img class="card-img lazyload" data-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" data-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)" data-src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><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" /></noscript> <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>Card mit Hintergrundfarbe
Die Card besteht aus folgenden Elementen:
- Bild
- Kopfzeile
- Titel
- Button Link
Label Versal Text
Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card.
Button Link<article class="card card--standard"> <img class="card-img lazyload" data-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" data-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)" data-src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><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" /></noscript> <div class="card-body bg--warm-grey-secondary"> <p class="h6">Label Versal Text</p> <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> <a class="btn btn-link" href="#"> Button Link <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div></article>Card für online Veranstaltungen
Die Card besteht aus folgenden Elementen:
- Bild
- Datum
- Badge (optional)
- Titel
- Status Text “Ausgebucht”
- Anmelden Link
- 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<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 lazyload" data-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" data-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)" data-src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><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" /></noscript> <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>Card für Veranstaltungen „Vorort“
Die Card besteht aus folgenden Elementen:
- Bild
- Datum
- Titel
- Status Text “Ausgebucht”
- Ortsangabe
- Wochentag
- Mo
- Tag
- 01
- Monat
- Jan
<div class="card card-eventbox card-eventbox--b"> <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> <img class="card-img lazyload" data-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" data-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)" data-src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><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" /></noscript> <div class="card-body bg--duck-egg-green-secondary"> <h3 class="card-title h4"> <a href="#" >Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card.</a > </h3> <p class="card-info h6">Label Versal Text</p> </div> <div class="card-footer bg--duck-egg-green-secondary"> <dl> <dt class="visually-hidden">Adresse</dt> <dd class="h6"> <svg class="icon icon-pin"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-pin"></use> </svg> PLZ 1234, Wien </dd> </dl> </div></div>Card für WIFI Veranstaltungen
Die Card besteht aus folgenden Elementen:
- Bild
- Datum
- Titel
- Status Text “WIFI”
- Ortsangabe
- Wochentag
- Mo
- Tag
- 01
- Monat
- Jan
<div class="card card-eventbox card-eventbox--b"> <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> <img class="card-img lazyload" data-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" data-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)" data-src="https://picsum.photos/id/534/848/476" alt="Jungunternehmerin" width="848" height="476" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><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" /></noscript> <div class="card-body bg--wifi-green-secondary"> <h3 class="card-title h4"> <a href="#" >Card-Text besteht aus max. 90 Zeichen, sind ca. 16 Wörter, sind ca. 3 Zeilen für diese Card.</a > </h3> <p class="card-info h6">wifi</p> </div> <div class="card-footer bg--wifi-green-secondary"> <dl> <dt class="visually-hidden">Adresse</dt> <dd class="h6"> <svg class="icon icon-pin"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-pin"></use> </svg> PLZ 1234, Wien </dd> </dl> </div></div>Card Small
Die Card besteht aus folgenden Elementen:
- Hintergrundfarbe
- Kopfzeile
- Titel
- Button Link
Label Versal Text
80 Zeichen, ca. 12 Wörter, natoque penatibus et magnis dis parturient montes.
Button Link<article class="card card--small"> <div class="card-body bg--lavender-secondary"> <p class="h6">Label Versal Text</p> <h3 class="card-title h4"> 80 Zeichen, ca. 12 Wörter, natoque penatibus et magnis dis parturient montes. </h3> <a class="btn btn-link" href="#"> Button Link <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div></article>Card Small Icon
Diese Card kommt ausschließlich auf den Startseiten zum Einsatz und befindet sich immer auf einer Farbfläche. Die Card besteht aus folgenden Elementen:
- Icon
- Kopfzeile
- Titel
- Button Link
- Farbleiste aus Bereich
Label Versal Text
55 Zeichen, ca. 9 Wörter, natoque penatibus et magnis.
Button Link<article class="card card--small-icon"> <div class="card-body bl--lavender-primary"> <p class="h6">Label Versal Text</p> <div class="row"> <div class="col-auto icon-image"> <svg class="icon icon-thema-arbeitsrecht"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-thema-arbeitsrecht" ></use> </svg> </div> <div class="col content d-flex flex-column justify-content-between"> <h3 class="card-title h4"> 55 Zeichen, ca. 9 Wörter, natoque penatibus et magnis. </h3> <a class="btn btn-link" href="#"> Button Link <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div> </div> </div></article>Card eService
Die Card besteht aus folgenden Elementen:
- Icon
- Kopfzeile
- Titel
- Button Link
<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>Card Hero
Die Card besteht aus folgenden Elementen:
- Bild
- Titel (optional)
- Button (optional)
<div class="card card-hero bg-dark text-white"> <img class="card-img lazyload" data-srcset="https://picsum.photos/id/534/560/560 560w, https://picsum.photos/id/534/848/848 848w, https://picsum.photos/id/534/1070/1070 1070w" data-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)" data-src="https://picsum.photos/id/534/848/848" alt="Jungunternehmerin" width="848" height="848" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><img class="card-img" srcset=" https://picsum.photos/id/534/560/560 560w, https://picsum.photos/id/534/848/848 848w, https://picsum.photos/id/534/1070/1070 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/848" alt="Jungunternehmerin" width="848" height="848" /></noscript> <div class="card-img-overlay"> <h3 class="card-title"> Card-Text besteht aus max. 100 Zeichen, sind ca. 18 Wörter und commo ligula eget dolor enean massa. </h3> <a class="btn btn-secondary" href="#"> Secondary </a> </div></div>Card 100%
Die Card besteht aus folgenden Elementen:
- Bild
- Datum
- Titel
- Button Link
<article class="card card--100-image"> <picture> <source media="(max-width: 375px)" srcset=" https://picsum.photos/id/534/702/292/ 2x, https://picsum.photos/id/534/351/146/ 1x " type="image/jpeg" /> <source media="(max-width: 390px)" srcset=" https://picsum.photos/id/534/732/306/ 2x, https://picsum.photos/id/534/366/153/ 1x " type="image/jpeg" /> <source media="(max-width: 414px)" srcset=" https://picsum.photos/id/534/780/326/ 2x, https://picsum.photos/id/534/390/163/ 1x " type="image/jpeg" /> <source media="(max-width: 428px)" srcset=" https://picsum.photos/id/534/808/336/ 2x, https://picsum.photos/id/534/404/168/ 1x " type="image/jpeg" /> <source media="(max-width: 559px)" srcset=" https://picsum.photos/id/534/1070/600/ 2x, https://picsum.photos/id/534/535/300/ 1x " type="image/jpeg" /> <source media="(max-width: 799px)" srcset=" https://picsum.photos/id/534/912/512/ 2x, https://picsum.photos/id/534/456/256/ 1x " type="image/jpeg" /> <source media="(max-width: 991px)" srcset=" https://picsum.photos/id/534/1344/782/ 2x, https://picsum.photos/id/534/696/391/ 1x " type="image/jpeg" /> <source media="(max-width: 1229px)" srcset=" https://picsum.photos/id/534/1776/740/ 2x, https://picsum.photos/id/534/888/370/ 1x " type="image/jpeg" /> <source media="(max-width: 1423px)" srcset=" https://picsum.photos/id/534/2256/940/ 2x, https://picsum.photos/id/534/1128/470 1x " type="image/jpeg" /> <source media="(min-width: 1424px)" srcset=" https://picsum.photos/id/534/2640/1100/ 2x, https://picsum.photos/id/534/1320/550/ 1x " type="image/jpeg" /> <img src="https://picsum.photos/id/534/1320/550" class="card-img" alt="Alternativ Text" /> </picture> <div class="card-img-overlay offset-md-1 col-md-6 col-xl-4"> <p class="h6">01.01.2024</p> <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> <a class="btn btn-link" href="#"> Weiterlesen <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div></article>Card Top Thema
Die Card besteht aus folgenden Elementen:
- Bild
- Datum
- Titel
- Button Link
<article class="card card--100-image toptopic"> <picture> <source media="(max-width: 375px)" srcset=" https://picsum.photos/id/534/702/292/ 2x, https://picsum.photos/id/534/351/146/ 1x " type="image/jpeg" /> <source media="(max-width: 390px)" srcset=" https://picsum.photos/id/534/732/306/ 2x, https://picsum.photos/id/534/366/153/ 1x " type="image/jpeg" /> <source media="(max-width: 414px)" srcset=" https://picsum.photos/id/534/780/326/ 2x, https://picsum.photos/id/534/390/163/ 1x " type="image/jpeg" /> <source media="(max-width: 428px)" srcset=" https://picsum.photos/id/534/808/336/ 2x, https://picsum.photos/id/534/404/168/ 1x " type="image/jpeg" /> <source media="(max-width: 559px)" srcset=" https://picsum.photos/id/534/1070/600/ 2x, https://picsum.photos/id/534/535/300/ 1x " type="image/jpeg" /> <source media="(max-width: 799px)" srcset=" https://picsum.photos/id/534/912/512/ 2x, https://picsum.photos/id/534/456/256/ 1x " type="image/jpeg" /> <source media="(max-width: 991px)" srcset=" https://picsum.photos/id/534/1344/782/ 2x, https://picsum.photos/id/534/696/391/ 1x " type="image/jpeg" /> <source media="(max-width: 1229px)" srcset=" https://picsum.photos/id/534/1776/740/ 2x, https://picsum.photos/id/534/888/370/ 1x " type="image/jpeg" /> <source media="(max-width: 1423px)" srcset=" https://picsum.photos/id/534/2256/940/ 2x, https://picsum.photos/id/534/1128/470 1x " type="image/jpeg" /> <source media="(min-width: 1424px)" srcset=" https://picsum.photos/id/534/2640/1100/ 2x, https://picsum.photos/id/534/1320/550/ 1x " type="image/jpeg" /> <img src="https://picsum.photos/id/534/1320/550" class="card-img" alt="Alternativ Text" /> </picture> <div class="card-img-overlay offset-md-1 col-md-6 col-xl-4"> <p class="h6">01.01.2024</p> <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> <a class="btn btn-link" href="#"> Weiterlesen <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div></article>Card Video
Die Card besteht aus folgenden Elementen:
- Video Icon
- Bild
- Kopfzeile
- Titel
- Button Link
<article class="card card--100-image videocard"> <picture> <source media="(max-width: 375px)" srcset=" https://picsum.photos/id/534/702/292/ 2x, https://picsum.photos/id/534/351/146/ 1x " type="image/jpeg" /> <source media="(max-width: 390px)" srcset=" https://picsum.photos/id/534/732/306/ 2x, https://picsum.photos/id/534/366/153/ 1x " type="image/jpeg" /> <source media="(max-width: 414px)" srcset=" https://picsum.photos/id/534/780/326/ 2x, https://picsum.photos/id/534/390/163/ 1x " type="image/jpeg" /> <source media="(max-width: 428px)" srcset=" https://picsum.photos/id/534/808/336/ 2x, https://picsum.photos/id/534/404/168/ 1x " type="image/jpeg" /> <source media="(max-width: 559px)" srcset=" https://picsum.photos/id/534/1070/600/ 2x, https://picsum.photos/id/534/535/300/ 1x " type="image/jpeg" /> <source media="(max-width: 799px)" srcset=" https://picsum.photos/id/534/912/512/ 2x, https://picsum.photos/id/534/456/256/ 1x " type="image/jpeg" /> <source media="(max-width: 991px)" srcset=" https://picsum.photos/id/534/1344/782/ 2x, https://picsum.photos/id/534/696/391/ 1x " type="image/jpeg" /> <source media="(max-width: 1229px)" srcset=" https://picsum.photos/id/534/1776/740/ 2x, https://picsum.photos/id/534/888/370/ 1x " type="image/jpeg" /> <source media="(max-width: 1423px)" srcset=" https://picsum.photos/id/534/2256/940/ 2x, https://picsum.photos/id/534/1128/470 1x " type="image/jpeg" /> <source media="(min-width: 1424px)" srcset=" https://picsum.photos/id/534/2640/1100/ 2x, https://picsum.photos/id/534/1320/550/ 1x " type="image/jpeg" /> <img src="https://picsum.photos/id/534/1320/550" class="card-img" alt="Alternativ Text" /> <svg class="icon icon-video-60"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-video-60"></use> </svg> </picture> <div class="card-img-overlay"> <p class="h6">Label Versal Text</p> <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> <a class="btn btn-link" href="#"> Weiterlesen <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div></article>Card Full Content (optional Bild rechts)
Die Card besteht aus folgenden Elementen:
- Bild
- Kopfzeile
- Titel
- Untertitel
- Button Link
- Hintergrundfarbe
Label Versal Text
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.
Button Link<article class="card card--full bg--dusty-peach-secondary"> <div class="row"> <div class="col-lg-6"> <img class="card-img lazyload" data-srcset="https://picsum.photos/id/534/864/486 864w, https://picsum.photos/id/534/1070/600 1070w, https://picsum.photos/id/534/1392/784 1296w" data-sizes="(min-width:1424px)648px, (min-width:1230px)552px, (min-width:992px)432px, (min-width:800px)696px, (min-width:560px)456px, calc(100vw-1.5rem)" data-src="https://picsum.photos/id/534/1070/600" alt="Alternativtext" width="1070" height="600" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><img class="card-img" srcset=" https://picsum.photos/id/534/864/486 864w, https://picsum.photos/id/534/1070/600 1070w, https://picsum.photos/id/534/1392/784 1296w " sizes="(min-width:1424px)648px, (min-width:1230px)552px, (min-width:992px)432px, (min-width:800px)696px, (min-width:560px)456px, calc(100vw-1.5rem)" src="https://picsum.photos/id/534/1070/600" alt="Alternativtext" width="1070" height="600" /></noscript> </div> <div class="col-lg-6"> <div class="card-body"> <p class="h6">Label Versal Text</p> <h3 class="card-title"> Card-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter. </h3> <p class="card-text"> 160 Zeichen sind 23 Wörter. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. </p> <a class="btn btn-link" href="#"> Button Link <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div> </div> </div></article>Bild rechts:
Label Versal Text
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.
Button Link<article class="card card--full bg--dusty-peach-secondary"> <div class="row"> <div class="col-lg-6 order-2"> <img class="card-img lazyload" data-srcset="https://picsum.photos/id/534/864/486 864w, https://picsum.photos/id/534/1070/600 1070w, https://picsum.photos/id/534/1392/784 1296w" data-sizes="(min-width:1424px)648px, (min-width:1230px)552px, (min-width:992px)432px, (min-width:800px)696px, (min-width:560px)456px, calc(100vw-1.5rem)" data-src="https://picsum.photos/id/534/1070/600" alt="Alternativtext" width="1070" height="600" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><img class="card-img" srcset=" https://picsum.photos/id/534/864/486 864w, https://picsum.photos/id/534/1070/600 1070w, https://picsum.photos/id/534/1392/784 1296w " sizes="(min-width:1424px)648px, (min-width:1230px)552px, (min-width:992px)432px, (min-width:800px)696px, (min-width:560px)456px, calc(100vw-1.5rem)" src="https://picsum.photos/id/534/1070/600" alt="Alternativtext" width="1070" height="600" /></noscript> </div> <div class="col-lg-6"> <div class="card-body"> <p class="h6">Label Versal Text</p> <h3 class="card-title"> Card-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter. </h3> <p class="card-text"> 160 Zeichen sind 23 Wörter. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. </p> <a class="btn btn-link" href="#"> Button Link <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div> </div> </div></article>Card Full Content mit Farbfläche (optional Bild rechts)
Die Card besteht aus folgenden Elementen:
- Bild
- Kopfzeile
- Titel
- Untertitel
- Button Link
- Card Farbe weiß
- Hintergrundfarbe
Label Versal Text
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.
Button Link<article class="card card--full bg--white"> <div class="row"> <div class="col-lg-6"> <img class="card-img lazyload" data-srcset="https://picsum.photos/id/534/864/486 864w, https://picsum.photos/id/534/1070/600 1070w, https://picsum.photos/id/534/1392/784 1296w" data-sizes="(min-width:1424px)648px, (min-width:1230px)552px, (min-width:992px)432px, (min-width:800px)696px, (min-width:560px)456px, calc(100vw-1.5rem)" data-src="https://picsum.photos/id/534/1070/600" alt="Alternativtext" width="1070" height="600" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><img class="card-img" srcset=" https://picsum.photos/id/534/864/486 864w, https://picsum.photos/id/534/1070/600 1070w, https://picsum.photos/id/534/1392/784 1296w " sizes="(min-width:1424px)648px, (min-width:1230px)552px, (min-width:992px)432px, (min-width:800px)696px, (min-width:560px)456px, calc(100vw-1.5rem)" src="https://picsum.photos/id/534/1070/600" alt="Alternativtext" width="1070" height="600" /></noscript> </div> <div class="col-lg-6"> <div class="card-body"> <p class="h6">Label Versal Text</p> <h3 class="card-title"> Card-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter. </h3> <p class="card-text"> 160 Zeichen sind 23 Wörter. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. </p> <a class="btn btn-link" href="#"> Button Link <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div> </div> </div></article>Bild rechts:
Label Versal Text
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.
Button Link<article class="card card--full bg--white"> <div class="row"> <div class="col-lg-6 order-2"> <img class="card-img lazyload" data-srcset="https://picsum.photos/id/534/864/486 864w, https://picsum.photos/id/534/1070/600 1070w, https://picsum.photos/id/534/1392/784 1296w" data-sizes="(min-width:1424px)648px, (min-width:1230px)552px, (min-width:992px)432px, (min-width:800px)696px, (min-width:560px)456px, calc(100vw-1.5rem)" data-src="https://picsum.photos/id/534/1070/600" alt="Alternativtext" width="1070" height="600" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><img class="card-img" srcset=" https://picsum.photos/id/534/864/486 864w, https://picsum.photos/id/534/1070/600 1070w, https://picsum.photos/id/534/1392/784 1296w " sizes="(min-width:1424px)648px, (min-width:1230px)552px, (min-width:992px)432px, (min-width:800px)696px, (min-width:560px)456px, calc(100vw-1.5rem)" src="https://picsum.photos/id/534/1070/600" alt="Alternativtext" width="1070" height="600" /></noscript> </div> <div class="col-lg-6"> <div class="card-body"> <p class="h6">Label Versal Text</p> <h3 class="card-title"> Card-Text besteht aus max. 60 Zeichen, sind ca. 10 Wörter. </h3> <p class="card-text"> 160 Zeichen sind 23 Wörter. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. </p> <a class="btn btn-link" href="#"> Button Link <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div> </div> </div></article>Card Statistik
Die Card besteht aus folgenden Elementen:
- Bild
- Zahl
- Text
- Button Link
<article class="card card--statistik bg--warm-grey-secondary"> <div class="row"> <div class="col-md-6"> <img class="card-img lazyload" data-srcset="https://picsum.photos/id/534/864/486 864w, https://picsum.photos/id/534/1070/600 1070w, https://picsum.photos/id/534/1392/784 1296w" data-sizes="(min-width:1424px)648px, (min-width:1230px)552px, (min-width:992px)432px, (min-width:800px)696px, (min-width:560px)456px, calc(100vw-1.5rem)" data-src="https://picsum.photos/id/534/1070/600" alt="Alternativtext" width="1070" height="600" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /><noscript ><img class="card-img" srcset=" https://picsum.photos/id/534/864/486 864w, https://picsum.photos/id/534/1070/600 1070w, https://picsum.photos/id/534/1392/784 1296w " sizes="(min-width:1424px)648px, (min-width:1230px)552px, (min-width:992px)432px, (min-width:800px)696px, (min-width:560px)456px, calc(100vw-1.5rem)" src="https://picsum.photos/id/534/1070/600" alt="Alternativtext" width="1070" height="600" /></noscript> </div> <div class="col-md-6"> <div class="card-body"> <h3 class="card-title">52.000</h3> <p class="card-text">Unternehmen</p> <a class="btn btn-link statistik" href="#"> Button Link <svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right" ></use> </svg> </a> </div> </div> </div></article>