Alpaca components for Magento 2

Teaser: Secondary 

<div class="teaser teaser--secondary">
    <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": "teaser--secondary",
  "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.