hkk Frontend 2017

Drei Icon Teaser 

<div class="three-icon-teaser">
    <div class="three-icon-teaser__inner">
        <div class="three-icon-teaser__headline">
            <h2 class="headline headline--display-2">Das bieten wir
            </h2>
        </div>
        <div class="three-icon-teaser__carousel">
            <div class="three-icon-teaser__carousel-stage">
                <div class="three-icon-teaser__carousel-inner">
                    <div class="three-icon-teaser__items">
                        <div class="three-icon-teaser__item">
                            <div class="three-icon-teaser__item-image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-icon-teaser-01.svg" />
                            </div>
                            <div class="three-icon-teaser__item-content">
                                <div class="three-icon-teaser__item-headline">
                                    <h3 class="headline headline--display-3">Flexible Arbeitsmodelle
                                    </h3>
                                </div>
                                <p class="three-icon-teaser__item-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                            </div>
                        </div>
                        <div class="three-icon-teaser__item">
                            <div class="three-icon-teaser__item-image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-icon-teaser-02.svg" />
                            </div>
                            <div class="three-icon-teaser__item-content">
                                <div class="three-icon-teaser__item-headline">
                                    <h3 class="headline headline--display-3">Familienfreundliche Angebote
                                    </h3>
                                </div>
                                <p class="three-icon-teaser__item-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                            </div>
                        </div>
                        <div class="three-icon-teaser__item">
                            <div class="three-icon-teaser__item-image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-icon-teaser-03.svg" />
                            </div>
                            <div class="three-icon-teaser__item-content">
                                <div class="three-icon-teaser__item-headline">
                                    <h3 class="headline headline--display-3">Firmen Fitness
                                    </h3>
                                </div>
                                <p class="three-icon-teaser__item-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="three-icon-teaser-button-wrap">
                <a class="button button--blue button--outline" id="button-65b2" href="#">Button
</a>
            </div>
        </div>
    </div>
</div>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render Three Icon Teaser
.three-icon-teaser&attributes(attr)
  .three-icon-teaser__inner
    if headline
      .three-icon-teaser__headline
        != include('@headline--display-2', {text: headline, level: 2})

    if items
      .three-icon-teaser__carousel
        .three-icon-teaser__carousel-stage
          .three-icon-teaser__carousel-inner
            .three-icon-teaser__items
              each item in items
                .three-icon-teaser__item&attributes(teaserAttrs)
                  if item.image
                    .three-icon-teaser__item-image
                      != include('@image', {image: item.image, copyright: item.copyright})

                  .three-icon-teaser__item-content
                    if item.headline
                      .three-icon-teaser__item-headline
                        != include('@headline--display-3', {text: item.headline, level: 3})

                    if item.text
                      p.three-icon-teaser__item-text #{item.text}

        if button
          .three-icon-teaser-button-wrap
            != include('@button--blue-outline', button)
 
{
  "headline": "Das bieten wir",
  "items": [
    {
      "image": "/images/dummy/dummy-icon-teaser-01.svg",
      "headline": "Flexible Arbeitsmodelle",
      "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
    },
    {
      "image": "/images/dummy/dummy-icon-teaser-02.svg",
      "headline": "Familienfreundliche Angebote",
      "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
    },
    {
      "image": "/images/dummy/dummy-icon-teaser-03.svg",
      "headline": "Firmen Fitness",
      "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
    }
  ],
  "button": {
    "text": "Button"
  }
}
  • Content: 
    import h from 'hyperscript';
import { lory } from 'lory.js';

import icon from '../../../javascripts/utils/icon';

const createImagesLoadedPromise = $images =>
  Promise.all(
    $images.map($image => (
      new Promise(
        (resolve) => {
          if ($image.complete && $image.naturalWidth) {
            resolve();

            return;
          }

          $image.addEventListener('load', resolve);
          $image.addEventListener('error', resolve);
        }
      )
    ))
  );

const initCarousel = ($el) => {
  function carouselListener(mediaQuery) {
    const $inner = $el.querySelector('.three-icon-teaser__carousel-inner');
    const $stage = $el.querySelector('.three-icon-teaser__carousel-stage');
    let carousel = '';

    if (mediaQuery.matches) {
      const $images = $inner.querySelectorAll('img');
      const imagesLoadedPromise = createImagesLoadedPromise($images);
      document.querySelectorAll('.three-icon-teaser__carousel-controls').forEach(($controls) => {
        $controls.remove();
      });
      const $carouselControls = h('.three-icon-teaser__carousel-controls');

      const $prevControl = h('.three-icon-teaser__carousel-control.three-icon-teaser__carousel-control--prev.three-icon-teaser__carousel-control--disabled',
        h(
          'button.three-icon-teaser__carousel-control-button',
          { attrs: { 'aria-label': 'Vorherige Prüfsiegel anzeigen' } },
          icon({ icon: 'arrow-thin-left' }),
        ),
      );
      const $nextControl = h('.three-icon-teaser__carousel-control.three-icon-teaser__carousel-control--next',
        h(
          'button.three-icon-teaser__carousel-control-button',
          { attrs: { 'aria-label': 'Weitere Prüfsiegel anzeigen' } },
          icon({ icon: 'arrow-thin-right' }),
        ),
      );

      $carouselControls.appendChild($prevControl);
      $carouselControls.appendChild($nextControl);

      $inner.appendChild($carouselControls);

      carousel = lory($stage, {
        slidesToScroll: 1,
        autoplayTime: 5000,
        classNameFrame: 'three-icon-teaser__carousel-inner',
        classNameSlideContainer: 'three-icon-teaser__items',
        classNamePrevCtrl: 'three-icon-teaser__carousel-control--prev',
        classNameNextCtrl: 'three-icon-teaser__carousel-control--next',
        classNameDisabledPrevCtrl: 'three-icon-teaser__carousel-control--disabled',
        classNameDisabledNextCtrl: 'three-icon-teaser__carousel-control--disabled',
      });

      imagesLoadedPromise.then(
        () => {
          carousel.setup();
        }
      );
    } else if (carousel) {
      carousel.destroy();
      $inner.querySelectorAll('.three-icon-teaser__carousel-control').remove();
    }
  }

  window.addEventListener('resize', carouselListener);

  // Create media query for Carousel switch
  const carouselMediaQuery = window.matchMedia('(max-width: 885px)');

  // Add listener for changes in viewport
  carouselMediaQuery.addListener(carouselListener);

  // First run
  carouselListener(carouselMediaQuery);
};

document.querySelectorAll('.three-icon-teaser__carousel').forEach(initCarousel);
  • URL: /components/raw/three-icon-teaser/three-icon-teaser.js
  • Filesystem Path: src/components/organisms/three-icon-teaser/three-icon-teaser.js
  • Size: 3.1 KB
  • Content: 
    .three-icon-teaser {
  padding-bottom: 5rem;
  padding-top: 4rem;

  @include mq($from: l) {
    padding-bottom: 6rem;
    padding-top: 5rem;
  }
}

.three-icon-teaser__inner {
  @include make-container();

  @include mq($until: l) {
    padding-right: 0;
  }
}

.three-icon-teaser__carousel-stage {
  @include mq($until: l) {
    overflow: hidden;
  }
}

.three-icon-teaser__carousel-inner {
  @include mq($until: l) {
    overflow-x: visible;
  }
}

.three-icon-teaser__headline {
  margin-bottom: 3rem;
  text-align: center;

  @include mq($from: l) {
    margin-bottom: 4rem;
  }
}

.three-icon-teaser-button-wrap,
.three-icon-teaser__carousel-controls,
.three-icon-teaser__item-image {
  align-items: center;
  display: flex;
}

.three-icon-teaser-button-wrap,
.three-icon-teaser__carousel-controls {
  justify-content: center;
}

.three-icon-teaser-button-wrap {
  margin-top: 4.5rem;

  .button {
    min-width: 24rem;
  }

  @include mq($from: l) {
    margin-top: 5.5rem;
  }
}

.three-icon-teaser__carousel-controls {
  margin: 3rem 0 0;
  
  @include mq($from: l) {
    display: none;
  }
}

.three-icon-teaser__carousel-control-button {
  align-items: center;
  background-color: $color-blue-light;
  border-radius: 100%;
  color: #fff;
  display: inline-flex;
  height: 4rem;
  justify-content: center;
  width: 4rem;
}

.three-icon-teaser__carousel-control {
  margin: 0 0.5rem;
  transition: opacity $default-transition-duration;

  &--disabled {
    opacity: 0.25;
  }
}

.three-icon-teaser__items {
  display: flex;
  
  @include mq($from: l) {
    justify-content: center;
    margin-left: -4rem;
    margin-right: -4rem;
    transform: translateX(0) !important;
  }
}

.three-icon-teaser__item {
  flex: 1 0 75%;
  max-width: 75%;
  padding-left: 3rem;
  padding-right: 3rem;
  width: 100%;

  @include mq($from: m) {
    flex: 1 0 80%;
    max-width: 45%;
  }

  @include mq($from: l) {
    max-width: 25.5rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

.three-icon-teaser__item-image {
  align-items: flex-end;
  margin-bottom: 2.5rem;
  min-height: 13rem;
  text-align: center;

  img {
    max-height: 13rem;
    max-width: 13rem;
    width: auto;

    @include mq($from: l) {
      max-height: 15rem;
      max-width: 15rem;
    }
  }

  .image__copyright {
    right: calc(50% - 2.4rem);
    transform: translateX(-50%);
  }

  .tooltip__popup {
    min-width: 18rem;
  }

  @include mq($from: l) {
    justify-content: center;
    min-height: 14rem;
  }
}

.three-icon-teaser__item-content {
  :last-child {
    margin-bottom: 0;
  }
}

.three-icon-teaser__item-headline {
  margin-bottom: 1.5rem;
}

.three-icon-teaser__item-text {
  font-size: 1.5rem;
  line-height: 2.2rem;
}

.overview-page__container {
  .three-icon-teaser__inner {
    padding-left: 0;
    padding-right: 0;
  }

  .three-icon-teaser__carousel {
    @include mq($until: m) {
      margin-right: -1rem;
    }
  }
}
  • URL: /components/raw/three-icon-teaser/three-icon-teaser.scss
  • Filesystem Path: src/components/organisms/three-icon-teaser/three-icon-teaser.scss
  • Size: 2.9 KB

There are no notes for this item.