HIDA - Helmholtz Information and Data Science Academy

Section Figure 

<div class="section-figure">
    <div class="section-figure__inner">
        <figure class="figure" aria-labelledby="figure-b9de61-label">
            <div class="figure__media">
                <picture>
                    <source srcset="https://placehold.co/1046x588/A0A0A6/FFFFFF.webp?text=1046x588-webp" type="image/webp" media="(min-width:78.75em)" />
                    <source srcset="https://placehold.co/1046x588/A0A0A6/FFFFFF.jpg?text=1046x588-jpg" type="image/jpg" media="(min-width:78.75em)" />
                    <source srcset="https://placehold.co/1144x644/A0A0A6/FFFFFF.webp?text=1144x644-webp" type="image/webp" media="(min-width:48em)" />
                    <source srcset="https://placehold.co/1144x644/A0A0A6/FFFFFF.jpg?text=1144x644-jpg" type="image/jpg" media="(min-width:48em)" />
                    <source srcset="https://placehold.co/682x384/A0A0A6/FFFFFF.webp?text=682x384-webp" type="image/webp" />
                    <img src="https://picsum.photos/id/FFFFFF/682/384" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="682" height="384" loading="lazy" />
                </picture>
            </div>
            <figcaption class="figure__caption" id="figure-b9de61-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": {
    "picture": {
      "src": null,
      "width": 682,
      "height": 384,
      "lazyload": true,
      "items": [
        {
          "src": "https://placehold.co/1046x588/A0A0A6/FFFFFF.webp?text=1046x588-webp",
          "type": "webp",
          "breakpoint": 1260
        },
        {
          "src": "https://placehold.co/1046x588/A0A0A6/FFFFFF.jpg?text=1046x588-jpg",
          "type": "jpg",
          "breakpoint": 1260
        },
        {
          "src": "https://placehold.co/1144x644/A0A0A6/FFFFFF.webp?text=1144x644-webp",
          "type": "webp",
          "breakpoint": 768
        },
        {
          "src": "https://placehold.co/1144x644/A0A0A6/FFFFFF.jpg?text=1144x644-jpg",
          "type": "jpg",
          "breakpoint": 768
        },
        {
          "src": "https://placehold.co/682x384/A0A0A6/FFFFFF.webp?text=682x384-webp",
          "type": "webp",
          "breakpoint": null
        }
      ]
    },
    "caption": {
      "text": "Ich bin eine Bildunterschrift elitr, sed diam nmy consetetur sadipscing elitreirmod",
      "copyright": "Foto: Name/Agentur"
    }
  }
}
  • Content: 
    .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;
    }
  }
}
  • URL: /components/raw/section-figure/section-figure.scss
  • Filesystem Path: src/components/organisms/section-figure/section-figure.scss
  • Size: 566 Bytes

Image Sizes

default: 682 * 384, ratio 16 / 9

>768: 1144 * 644, ratio 16 / 9

>1260: 1046 * 588, ratio 16 / 9