<div class="section-figure">
<div class="section-figure__inner">
<figure class="figure" aria-labelledby="figure-29df53-label">
<div class="figure__media">
<div class="image loading" style="padding-top: 38.31417624521073%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="1044" height="400" src="https://via.placeholder.com/1044x400/A0A0A6/FFFFFF.png?text=1044x400" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="1044" height="400" data-src="https://via.placeholder.com/1044x400/A0A0A6/FFFFFF.png?text=1044x400" /></div>
</div>
<figcaption class="figure__caption" id="figure-29df53-label"><span class="figure__caption__text">Ich bin eine Bildunterschrift elitr, sed diam nmy consetetur sadipscing elitreirmod</span><span class="figure__caption__copyright">Foto: Name/Agentur</span></figcaption>
</figure>
</div>
</div>
#{tag || 'div'}.section-figure()&attributes(attr)
.section-figure__inner
+include('@figure', figure)
{
"figure": {
"image": {
"width": 1044,
"height": 400
},
"caption": {
"text": "Ich bin eine Bildunterschrift elitr, sed diam nmy consetetur sadipscing elitreirmod",
"copyright": "Foto: Name/Agentur"
}
}
}
.section-figure {
padding: 0 1.5rem;
@include mq($from: m) {
padding: 0 3rem;
}
@include mq($from: xl) {
padding: 0 9rem;
}
}
.section-figure__inner {
margin: 0 auto;
max-width: 83rem;
@include mq($from: xl) {
.figure {
margin-right: -25%;
}
.figure__caption {
border-bottom: 1px solid $color-border-gray-light;
bottom: 0;
left: -20.2%;
padding-bottom: 1.5rem;
position: absolute;
width: calc(20.2% - 4rem);
}
.figure__caption__copyright {
display: block;
}
}
}
There are no notes for this item.