Calendar-Card @calendar-card
Image @calendar-card--image
<a class="calendar-card calendar-card--image" href="#">
<div class="calendar-card__image">
<div class="image loading" style="padding-top: 66.25%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="265" src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" height="265" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><svg class="icon icon--reading" viewBox="0 0 200 200">
<use xlink:href="#icon-reading"></use>
</svg>
</div>
<div class="calendar-card__headline">
<h4 class="headline headline--4">Hier steht ein Titel</h4>
</div>
<div class="calendar-card__info">
<div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
<use xlink:href="#icon-stopwatch"></use>
</svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
<div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="calendar-card__info__text">Stuttgart</span></div>
</div>
</a>{
"link": "#",
"headline": {
"text": "Hier steht ein Titel",
"level": 4,
"size": 4
},
"image": {
"src": "https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265",
"width": 400,
"height": 265,
"icon": "reading"
},
"info": [
{
"icon": "stopwatch",
"text": "17:00 Uhr"
},
{
"icon": "location",
"text": "Stuttgart"
}
]
}
Image and Badge @calendar-card--badge
<a class="calendar-card calendar-card--image" href="#">
<div class="calendar-card__badge">Zusatztermin</div>
<div class="calendar-card__image">
<div class="image loading" style="padding-top: 66.25%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="265" src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" height="265" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><svg class="icon icon--reading" viewBox="0 0 200 200">
<use xlink:href="#icon-reading"></use>
</svg>
</div>
<div class="calendar-card__headline">
<h4 class="headline headline--4">Hier steht ein Titel</h4>
</div>
<div class="calendar-card__info">
<div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
<use xlink:href="#icon-stopwatch"></use>
</svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
<div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="calendar-card__info__text">Stuttgart</span></div>
<div class="calendar-card__info__badge">Für Kinder</div>
</div>
</a>{
"link": "#",
"headline": {
"text": "Hier steht ein Titel",
"level": 4,
"size": 4
},
"image": {
"src": "https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265",
"width": 400,
"height": 265,
"icon": "reading"
},
"info": [
{
"icon": "stopwatch",
"text": "17:00 Uhr"
},
{
"icon": "location",
"text": "Stuttgart"
}
],
"badge": "Zusatztermin",
"infoBadge": "Für Kinder"
}
Canvas @calendar-card--canvas
<a class="calendar-card calendar-card--canvas" href="#">
<div class="calendar-card__canvas calendar-card__canvas--liso-sand">
<div class="calendar-card__canvas__inner"><svg class="icon icon--theatre" viewBox="0 0 200 200">
<use xlink:href="#icon-theatre"></use>
</svg></div>
</div>
<div class="calendar-card__headline">
<h4 class="headline headline--4">Hier steht ein Titel</h4>
</div>
<div class="calendar-card__info">
<div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
<use xlink:href="#icon-stopwatch"></use>
</svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
<div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="calendar-card__info__text">Stuttgart</span></div>
</div>
</a>{
"link": "#",
"headline": {
"text": "Hier steht ein Titel",
"level": 4,
"size": 4
},
"image": null,
"info": [
{
"icon": "stopwatch",
"text": "17:00 Uhr"
},
{
"icon": "location",
"text": "Stuttgart"
}
],
"canvas": {
"backgroundColor": "liso-sand",
"icon": "theatre"
}
}
Canvas and Badge @calendar-card--canvas-badge
<a class="calendar-card calendar-card--canvas" href="#">
<div class="calendar-card__badge">Zusatztermin</div>
<div class="calendar-card__canvas calendar-card__canvas--liso-purple">
<div class="calendar-card__canvas__inner"><svg class="icon icon--theatre" viewBox="0 0 200 200">
<use xlink:href="#icon-theatre"></use>
</svg></div>
</div>
<div class="calendar-card__headline">
<h4 class="headline headline--4">Hier steht ein Titel</h4>
</div>
<div class="calendar-card__info">
<div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
<use xlink:href="#icon-stopwatch"></use>
</svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
<div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="calendar-card__info__text">Stuttgart</span></div>
<div class="calendar-card__info__badge">Für Kinder</div>
</div>
</a>{
"link": "#",
"headline": {
"text": "Hier steht ein Titel",
"level": 4,
"size": 4
},
"image": null,
"info": [
{
"icon": "stopwatch",
"text": "17:00 Uhr"
},
{
"icon": "location",
"text": "Stuttgart"
}
],
"badge": "Zusatztermin",
"canvas": {
"backgroundColor": "liso-purple",
"icon": "theatre"
},
"infoBadge": "Für Kinder"
}
Icon @calendar-card--icon
<a class="calendar-card calendar-card--icon" href="#">
<div class="calendar-card__icon"><svg class="icon icon--theatre" viewBox="0 0 200 200">
<use xlink:href="#icon-theatre"></use>
</svg></div>
<div class="calendar-card__headline">
<h4 class="headline headline--4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</h4>
</div>
<div class="calendar-card__info">
<div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
<use xlink:href="#icon-stopwatch"></use>
</svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
<div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="calendar-card__info__text">Stuttgart</span></div>
</div>
</a>{
"link": "#",
"headline": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"level": 4,
"size": 4
},
"image": null,
"info": [
{
"icon": "stopwatch",
"text": "17:00 Uhr"
},
{
"icon": "location",
"text": "Stuttgart"
}
],
"icon": "theatre"
}
Icon and Badge @calendar-card--icon-badge
<a class="calendar-card calendar-card--icon" href="#">
<div class="calendar-card__badge">Zusatztermin</div>
<div class="calendar-card__icon"><svg class="icon icon--theatre" viewBox="0 0 200 200">
<use xlink:href="#icon-theatre"></use>
</svg></div>
<div class="calendar-card__headline">
<h4 class="headline headline--4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</h4>
</div>
<div class="calendar-card__info">
<div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
<use xlink:href="#icon-stopwatch"></use>
</svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
<div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="calendar-card__info__text">Stuttgart</span></div>
<div class="calendar-card__info__badge">Für Kinder</div>
</div>
</a>{
"link": "#",
"headline": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"level": 4,
"size": 4
},
"image": null,
"info": [
{
"icon": "stopwatch",
"text": "17:00 Uhr"
},
{
"icon": "location",
"text": "Stuttgart"
}
],
"badge": "Zusatztermin",
"icon": "theatre",
"infoBadge": "Für Kinder"
}