Teaser

<div class="teaser ">
    <picture class="image teaser__image">
        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/teaser/teaser-medium-girl_376-432.jpg" media="(max-width: 768px)" />
        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/teaser/teaser-medium-girl_472-432.jpg" media="(max-width: 1024px)" />
        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/teaser/teaser-large-girl_1328-1200.jpg" media="" />

        <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/teaser/teaser-small-girl_768-768.jpg" alt="Teaser girl image" />
    </picture>

    <div class="teaser__content">
        <div class="teaser__content-block">
            <div class="content-block ">
                <div class="content-block__row row">
                    <div class="content-block__column col-xs-12">
                        <h2 class="content-block__heading">
                            Lorem ipsum
                        </h2>

                        <div class="paragraph content-block__description">
                            <span>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
                            </span>
                        </div>

                        <a class="link content-block__link" href="#" title="Title">
                            Link
                        </a>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="teaser {{ class }}">
    {{ render '@image--picture' image }}
    <div class="teaser__content">
        <div class="teaser__content-block">
            {{ render (component contentElement) contentContext merge=true }}
        </div>
    </div>
</div>
{
  "class": "",
  "image": {
    "src": "/images/home/teaser/teaser-small-girl_768-768.jpg",
    "class": "teaser__image",
    "defaultSrc": "/images/home/teaser/teaser-small-girl_768-768.jpg",
    "sources": [
      {
        "src": "/images/home/teaser/teaser-medium-girl_376-432.jpg",
        "mediaQuery": "(max-width: 768px)"
      },
      {
        "src": "/images/home/teaser/teaser-medium-girl_472-432.jpg",
        "mediaQuery": "(max-width: 1024px)"
      },
      {
        "src": "/images/home/teaser/teaser-large-girl_1328-1200.jpg",
        "mediaQuery": ""
      }
    ],
    "alt": "Teaser girl image"
  },
  "contentElement": "content-block"
}
  • Content:
    $teaser__margin                        : 0 !default;
    $teaser__margin\@medium                : 0 !default;
    $teaser__background-color              : $teal !default;
    
    $teaser__content-padding               : $spacer--semi-medium !default;
    $teaser__content-padding\@medium       : $spacer--semi-large !default;
    $teaser__content-padding\@large        : 72px 56px !default;
    
    $teaser__content-block-background-color: $white !default;
    
  • URL: /components/raw/teaser/_teaser-variables.scss
  • Filesystem Path: build/components/Organisms/teaser/_teaser-variables.scss
  • Size: 427 Bytes
  • Content:
    @import 'teaser-variables';
    
    .teaser {
        display: flex;
        flex-flow: row wrap;
        margin: $teaser__margin;
        background-color: $teaser__background-color;
    
        &--secondary {
            flex-direction: row-reverse;
        }
    
        @include mq($screen-m) {
            flex-wrap: nowrap;
            margin: $teaser__margin\@medium;
        }
    
        &__image {
            width: 100%;
    
            @include mq($screen-m) {
                width: 50%;
            }
        }
    
        &__content {
            display: flex;
            width: 100%;
            padding: $teaser__content-padding;
    
            @include mq($screen-m) {
                width: 50%;
                padding: $teaser__content-padding\@medium;
            }
    
            @include mq($screen-xl) {
                padding: $teaser__content-padding\@large;
            }
        }
    
        &__content-block {
            display: flex;
            align-items: center;
            height: 100%;
            background-color: $teaser__content-block-background-color;
        }
    }
    
  • URL: /components/raw/teaser/_teaser.scss
  • Filesystem Path: build/components/Organisms/teaser/_teaser.scss
  • Size: 945 Bytes

No notes defined.