HIDA - Helmholtz Information and Data Science Academy

Section Teaser: Section Teaser 

<div class="section-teaser">
    <div class="section-teaser__image">
        <picture>
            <source srcset="https://placehold.co/1920x960/A0A0A6/FFFFFF.webp?text=1920x960-webp" type="image/webp" media="(min-width:78.75em)" />
            <source srcset="https://placehold.co/1920x960/A0A0A6/FFFFFF.jpg?text=1920x960-jpg" type="image/jpg" media="(min-width:78.75em)" />
            <source srcset="https://placehold.co/1259x630/A0A0A6/FFFFFF.webp?text=1259x630-webp" type="image/webp" media="(min-width:48em)" />
            <source srcset="https://placehold.co/1259x630/A0A0A6/FFFFFF.jpg?text=1259x630-jpg" type="image/jpg" media="(min-width:48em)" />
            <source srcset="https://placehold.co/767x346/A0A0A6/FFFFFF.webp?text=767x384-webp" type="image/webp" />
            <img src="https://picsum.photos/id/FFFFFF/767/384" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="767" height="384" loading="lazy" />
        </picture>
    </div>
    <div class="section-teaser__body">
        <div class="section-teaser__headline">
            <h1 class="headline headline--module-1">Offene Stellen bei Helmholtz Die Höhe des Teaser richtet sich nach Der Texthöhe</h1>
        </div>
        <div class="section-teaser__button"><a class="button button--primary" href="#"><span class="button__inner"><span class="button__text">Text-Button</span></span></a></div>
    </div>
</div>
 
#{tag || 'div'}.section-teaser()&attributes(attr)
  .section-teaser__image
    if parallax
      +include('@parallax--image', parallax)
    if picture
      +include('@picture', picture)
  .section-teaser__body
    if headline
      .section-teaser__headline
        +include('@headline--module-1', headline)
    if button
      .section-teaser__button
        +include('@button', button)
 
{
  "headline": {
    "text": "Offene Stellen bei Helmholtz Die Höhe des Teaser richtet sich nach Der Texthöhe"
  },
  "button": {
    "text": "Text-Button"
  },
  "picture": {
    "src": null,
    "width": 767,
    "height": 384,
    "lazyload": true,
    "items": [
      {
        "src": "https://placehold.co/1920x960/A0A0A6/FFFFFF.webp?text=1920x960-webp",
        "type": "webp",
        "breakpoint": 1260
      },
      {
        "src": "https://placehold.co/1920x960/A0A0A6/FFFFFF.jpg?text=1920x960-jpg",
        "type": "jpg",
        "breakpoint": 1260
      },
      {
        "src": "https://placehold.co/1259x630/A0A0A6/FFFFFF.webp?text=1259x630-webp",
        "type": "webp",
        "breakpoint": 768
      },
      {
        "src": "https://placehold.co/1259x630/A0A0A6/FFFFFF.jpg?text=1259x630-jpg",
        "type": "jpg",
        "breakpoint": 768
      },
      {
        "src": "https://placehold.co/767x346/A0A0A6/FFFFFF.webp?text=767x384-webp",
        "type": "webp",
        "breakpoint": null
      }
    ]
  }
}
  • Content: 
    .section-teaser {
  color: #fff;
  position: relative;
}

.section-teaser__image {
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;

  img {
    height: 100%;
    object-fit: cover;
  }
}

.section-teaser__body {
  padding: 7rem 1.5rem;
  position: relative;
  z-index: 1;

  @include mq($from: m) {
    padding: 9rem 3rem 8rem;
  }

  @include mq($from: xl) {
    padding: 17rem 0 15rem 9rem;
  }
}

.section-teaser__headline {
  margin-bottom: 1.5rem;

  @include mq($from: m) {
    margin-bottom: 4rem;
    width: 66%;
  }

  @include mq($from: xl) {
    max-width: 80rem;
    width: 50%;
  }
}
  • URL: /components/raw/section-teaser/section-teaser.scss
  • Filesystem Path: src/components/organisms/section-teaser/section-teaser.scss
  • Size: 620 Bytes

Image Sizes

default: 767 * 384, ratio 2 / 1

> 768px: 1259 * 630, ratio 2 / 1

> 1260px: 1920 * 960, ratio 2 / 1