<div class="section-quote">
<div class="section-quote__inner">
<blockquote class="quote quote--color-green quote--image">
<div class="quote__inner">
<div class="quote__image">
<picture>
<source srcset="https://placehold.co/250x250/A0A0A6/FFFFFF.webp?text=250x250-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/250/250" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="250" height="250" loading="lazy" />
</picture>
</div><span class="quote__number">3,6</span>
<h3 class="headline headline--module-2">Millionen Euro investiert HIDA jährlich in die Aus- und Weiterbildung von Forschenden.</h3>
<p class="bodytext">Zum Beispiel in Christian Gerloff und seine Grundlagenforschung für die Neurowissenschaft. Er ist den Signalen des menschlichen Gehirns an der <a href="#">HDS-LEE</a> auf der Spur – mit Data Science.</p>
</div>
</blockquote>
</div>
</div>
#{tag || 'div'}.section-quote()&attributes(attr)
.section-quote__inner
+include('@quote', quote)
{
"quote": {
"color": "green",
"picture": {
"src": null,
"width": 250,
"height": 250,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/250x250/A0A0A6/FFFFFF.webp?text=250x250-webp",
"type": "webp",
"breakpoint": null
}
]
},
"number": "3,6",
"headline": {
"text": "Millionen Euro investiert HIDA jährlich in die Aus- und Weiterbildung von Forschenden."
},
"text": "Zum Beispiel in Christian Gerloff und seine Grundlagenforschung für die Neurowissenschaft. Er ist den Signalen des menschlichen Gehirns an der <a href=\"#\">HDS-LEE</a> auf der Spur – mit Data Science.\n"
}
}
.section-quote {
padding: 0 1.5rem;
@include mq($from: m) {
padding: 0 3rem;
}
@include mq($from: xl) {
padding: 0 9rem;
}
}
.section-quote__inner {
margin: 0 auto;
max-width: 111rem;
}
See molecules -> quote for image sizes