Facts Klimaschutzstiftung @facts
<div class="facts">
<div class="facts__inner">
<div class="facts__headline">
<h2 class="headline headline--1">Auf dem Weg zur Klimaneutralität</h2>
</div>
<div class="facts__text">
<div class="text">
<p>STAND: 25.02.2021</p>
</div>
</div>
<div class="facts__items">
<div class="facts__item facts__item--0">
<div class="facts__item-image">
<div class="image loading" style="padding-top: 95%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="380" src="/images/kss/bubbles.png" width="400" role="presentation" /></noscript><img class="image__img js-lazyload" data-src="/images/kss/bubbles.png" width="400" height="380" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." role="presentation" /></div>
<div class="facts__item-text">
<div class="facts__item-value" data-duration="5">5</div>
<div class="facts__item-value-text"></div>
</div>
</div>
<div class="text facts__kicker">
<p>kooperierende Institutionen</p>
</div>
</div>
<div class="facts__item facts__item--1">
<div class="facts__item-image">
<div class="image loading" style="padding-top: 95%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="380" src="/images/kss/pancakes.png" width="400" role="presentation" /></noscript><img class="image__img js-lazyload" data-src="/images/kss/pancakes.png" width="400" height="380" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." role="presentation" /></div>
<div class="facts__item-text">
<div class="facts__item-value" data-duration="4" data-decimal="," data-decimalplaces="1">1.3</div>
<div class="facts__item-value-text">Mio</div>
</div>
</div>
<div class="text facts__kicker">
<p>Investitionen der Stiftung</p>
</div>
</div>
<div class="facts__item facts__item--2">
<div class="facts__item-image">
<div class="image loading" style="padding-top: 95%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="380" src="/images/kss/clouds.png" width="400" role="presentation" /></noscript><img class="image__img js-lazyload" data-src="/images/kss/clouds.png" width="400" height="380" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." role="presentation" /></div>
<div class="facts__item-text">
<div class="facts__item-value" data-duration="2">4256</div>
<div class="facts__item-value-text">Kg</div>
</div>
</div>
<div class="text facts__kicker">
<p>CO₂-Kompensation aus Baden-Würrtemberg</p>
</div>
</div>
</div>
</div>
</div>{
"headline": {
"level": 2,
"text": "Auf dem Weg zur Klimaneutralität",
"size": 1
},
"text": {
"content": "p STAND: 25.02.2021\n"
},
"items": [
{
"image": {
"src": "/images/kss/bubbles.png",
"height": 380,
"width": 400
},
"kicker": {
"content": "p kooperierende Institutionen\n"
},
"value": {
"start": "0",
"end": "5",
"duration": 5
},
"valueText": null
},
{
"image": {
"src": "/images/kss/pancakes.png",
"height": 380,
"width": 400
},
"kicker": {
"content": "p Investitionen der Stiftung\n"
},
"value": {
"start": "0",
"end": "1.3",
"decimalPlaces": 1,
"decimal": ",",
"duration": 4
},
"valueText": "Mio"
},
{
"image": {
"src": "/images/kss/clouds.png",
"height": 380,
"width": 400
},
"kicker": {
"content": "p CO₂-Kompensation aus Baden-Würrtemberg\n"
},
"value": {
"start": 1200,
"end": 4256,
"duration": 2
},
"valueText": "Kg"
}
]
}
Facts BWzero @facts--bwzero
<div class="facts facts--bwzero">
<div class="facts__inner">
<div class="facts__items">
<div class="facts__item facts__item--0">
<div class="facts__item-image">
<div class="image loading" style="padding-top: 95%;"><noscript><img class="image__fallback" alt="Wolke mit Lineal" height="380" src="/images/kss/fact-ruler.png" width="400" role="presentation" /></noscript><img class="image__img js-lazyload" data-src="/images/kss/fact-ruler.png" width="400" height="380" alt="Wolke mit Lineal" role="presentation" /></div>
<div class="facts__item-text">
<div class="facts__item-value" data-duration="2">190</div>
<div class="facts__item-value-text">Tonnen CO₂</div>
</div>
</div>
<div class="text facts__kicker">
<p>Emissionen messen</p>
</div>
<div class="text facts__subline">
<p>Lorem Ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="facts__link"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-bottom" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-bottom"></use>
</svg></span><span class="icon-link__text">Mehr erfahren</span></a></div>
</div>
<div class="facts__item facts__item--1">
<div class="facts__item-image">
<div class="image loading" style="padding-top: 95%;"><noscript><img class="image__fallback" alt="Wolke mit Pfeilen, die nach unten zeigen" height="380" src="/images/kss/fact-arrow.png" width="400" role="presentation" /></noscript><img class="image__img js-lazyload" data-src="/images/kss/fact-arrow.png" width="400" height="380" alt="Wolke mit Pfeilen, die nach unten zeigen" role="presentation" /></div>
<div class="facts__item-text">
<div class="facts__item-value" data-duration="2">5</div>
<div class="facts__item-value-text">%</div>
</div>
</div>
<div class="text facts__kicker">
<p>Emissionen messen</p>
</div>
<div class="text facts__subline">
<p>Lorem Ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="facts__link"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-bottom" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-bottom"></use>
</svg></span><span class="icon-link__text">Mehr erfahren</span></a></div>
</div>
<div class="facts__item facts__item--2">
<div class="facts__item-image">
<div class="image loading" style="padding-top: 95%;"><noscript><img class="image__fallback" alt="Wolke mit Blume" height="380" src="/images/kss/fact-flower.png" width="400" role="presentation" /></noscript><img class="image__img js-lazyload" data-src="/images/kss/fact-flower.png" width="400" height="380" alt="Wolke mit Blume" role="presentation" /></div>
<div class="facts__item-text">
<div class="facts__item-value" data-duration="2" data-decimal="." data-decimalplaces="3">2.51</div>
<div class="facts__item-value-text">€</div>
</div>
</div>
<div class="text facts__kicker">
<p>Emissionen messen</p>
</div>
<div class="text facts__subline">
<p>Lorem Ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="facts__link"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-bottom" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-bottom"></use>
</svg></span><span class="icon-link__text">Mehr erfahren</span></a></div>
</div>
</div>
</div>
</div>{
"headline": null,
"text": null,
"items": [
{
"image": {
"src": "/images/kss/fact-ruler.png",
"height": 380,
"width": 400,
"alt": "Wolke mit Lineal"
},
"kicker": {
"content": "p Emissionen messen\n"
},
"subline": {
"content": "p Lorem Ipsum dolor sit amet, consectetuer adipiscing elit.\n"
},
"link": {
"text": "Mehr erfahren",
"link": "#",
"icon": "arrow-bottom"
},
"value": {
"end": "190",
"decimalPlaces": null,
"duration": 2
},
"valueText": "Tonnen CO₂"
},
{
"image": {
"src": "/images/kss/fact-arrow.png",
"height": 380,
"width": 400,
"alt": "Wolke mit Pfeilen, die nach unten zeigen"
},
"kicker": {
"content": "p Emissionen messen\n"
},
"subline": {
"content": "p Lorem Ipsum dolor sit amet, consectetuer adipiscing elit.\n"
},
"link": {
"text": "Mehr erfahren",
"link": "#",
"icon": "arrow-bottom"
},
"value": {
"end": 5,
"decimalPlaces": null,
"duration": 2
},
"valueText": "%"
},
{
"image": {
"src": "/images/kss/fact-flower.png",
"height": 380,
"width": 400,
"alt": "Wolke mit Blume"
},
"kicker": {
"content": "p Emissionen messen\n"
},
"subline": {
"content": "p Lorem Ipsum dolor sit amet, consectetuer adipiscing elit.\n"
},
"link": {
"text": "Mehr erfahren",
"link": "#",
"icon": "arrow-bottom"
},
"value": {
"end": 2.51,
"decimalPlaces": 3,
"decimal": ".",
"duration": 2
},
"valueText": "€"
}
],
"variantKey": "bwzero"
}
Facts 50-50 @facts--50-50
<div class="facts facts--50-50">
<div class="facts__inner">
<div class="facts__items">
<div class="facts__item facts__item--0">
<div class="facts__item-image">
<div class="image loading" style="padding-top: 67%;"><noscript><img class="image__fallback" alt="Schwebende blaue Bälle" height="335" src="/images/kss/facts-vertical-bubble.png" width="500" role="presentation" /></noscript><img class="image__img js-lazyload" data-src="/images/kss/facts-vertical-bubble.png" width="500" height="335" alt="Schwebende blaue Bälle" role="presentation" /></div>
<div class="facts__item-text">
<div class="facts__item-value" data-duration="2">5</div>
<div class="facts__item-value-text">Prozent</div>
</div>
</div>
<div class="text facts__subline">
<h3 class="headline headline--5">Scope 1 und 2</h3>
<p>5 Prozent im Zeitraum 2023-2030</p>
<p>Lorem Ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="facts__item facts__item--1">
<div class="facts__item-image">
<div class="image loading" style="padding-top: 67%;"><noscript><img class="image__fallback" alt="Schwebende blaue Wolken" height="335" src="/images/kss/facts-vertical-clouds.png" width="500" role="presentation" /></noscript><img class="image__img js-lazyload" data-src="/images/kss/facts-vertical-clouds.png" width="500" height="335" alt="Schwebende blaue Wolken" role="presentation" /></div>
<div class="facts__item-text">
<div class="facts__item-value" data-duration="2">7</div>
<div class="facts__item-value-text">Prozent</div>
</div>
</div>
<div class="text facts__subline">
<h3 class="headline headline--5">Scope 3</h3>
<p>7 Prozent im Zeitraum 2023-2030</p>
<p>Lorem Ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>{
"headline": null,
"text": null,
"items": [
{
"image": {
"src": "/images/kss/facts-vertical-bubble.png",
"height": 335,
"width": 500,
"alt": "Schwebende blaue Bälle"
},
"subline": {
"content": "+include('@headline--headline-3', {\n text: 'Scope 1 und 2',\n level: 3,\n size: 5,\n})\np 5 Prozent im Zeitraum 2023-2030\np Lorem Ipsum dolor sit amet, consectetuer adipiscing elit.\n"
},
"link": null,
"value": {
"end": "5",
"decimalPlaces": null,
"duration": 2
},
"valueText": "Prozent"
},
{
"image": {
"src": "/images/kss/facts-vertical-clouds.png",
"height": 335,
"width": 500,
"alt": "Schwebende blaue Wolken"
},
"kicker": null,
"subline": {
"content": "+include('@headline--headline-3', {\n text: 'Scope 3',\n level: 3,\n size: 5,\n})\np 7 Prozent im Zeitraum 2023-2030\np Lorem Ipsum dolor sit amet, consectetuer adipiscing elit.\n"
},
"link": null,
"value": {
"end": 7,
"decimalPlaces": null,
"duration": 2
},
"valueText": "Prozent"
}
],
"appearance": "50-50"
}