<section class="banner bgc--neutrals-10">
    <div class="banner__in"></div>

    <picture class="visual">
        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
        <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
    </picture>

    <div class="banner__inner">
        <div class="banner__content">
            <div class="banner__text">
                <h3 class="banner__heading heading">Master the art of DJing with Pioneer DJ Official EMEA DJ School Partners</h3>

            </div>

            <div class="banner__action">
                <div class="actions actions--start actions--force">
                    <div class="actions__item">

                        <a href="#" class="action action--ghost action--on-dark">
                            <span class="action__label">Find out more</span>
                            <span class="action__bg"></span>
                        </a>

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

</section>
<section class="banner{{#if size}} banner--{{ size }}{{/if}}{{#unless visual}} banner--no-image{{/unless}} bgc--neutrals-10">
  <div class="banner__in"></div>

  {{#if visual}}
    {{render '@visual' visual}}
  {{/if}}

  {{#if heading}}
  <div class="banner__inner">
    <div class="banner__content">
      <div class="banner__text">
        <h3 class="banner__heading heading">{{{ heading.label }}}</h3>

        {{#if description}}
        <div class="banner__description">{{ description }}</div>
        {{/if}}
      </div>

      {{#if action}}
        <div class="banner__action">
          <div class="actions actions--start actions--force">
            <div class="actions__item">
              {{render '@action' action}}
            </div>
          </div>
        </div>
      {{/if}}
    </div>
  </div>
  {{/if}}

  {{#if videoLink}}
    <div class="banner__play">
      {{> @icon-play }}
    </div>
  {{/if}}

  {{#if link}}
  <a href="{{ link.url }}" class="banner__link"{{#if link.target}} target="{{ link.target }}"{{/if}}></a>
  {{/if}}
</section>
/* No context defined. */
  • Content:
    .banner {
      position: relative;
      flex: auto;
      max-height: 340px;
      overflow: hidden;
    
      &.banner--square {
        max-height: 100%;
      }
    }
    
    .banner__in {
      display: block;
      width: 100%;
      height: 0;
      padding-top: 72%;
    
      @media (min-width: 750px) {
        padding-top: 31%;
      }
    
      .banner--small & {
        padding-top: 72%;
      }
    
      .banner--square & {
        padding-top: 100%;
      }
    
      .banner--no-image & {
        display: none;
      }
    }
    
    .banner__inner {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      flex: auto;
      display: flex;
      align-items: center;
      width: 100%;
      padding: calc(var(--gutter--bucket) * 2) var(--gutter--bucket);
    
      @media (min-width: 900px) {
        padding: calc(var(--gap) * 15);
      }
    
      .banner--small & {
        align-items: flex-end;
    
        @media (min-width: 900px) {
          padding: calc(var(--gap) * 6);
        }
      }
    
      .banner--no-image & {
        position: static;
    
        @media (min-width: 900px) {
          padding: calc(var(--gap) * 9) calc(var(--gap) * 15);
        }
      }
    }
    
    .banner__inner:before {
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(to right, rgba(#000, 1), rgba(#000, 0));
      content: '';
    
      @media (min-width: 750px) {
        width: 75%;
      }
    
      .banner--small & {
        transition: opacity 350ms;
        width: 100%;
        height: 75%;
        background-image: linear-gradient(to top, rgba(#000, 1), rgba(#000, 0));
        opacity: .7;
      }
    
      .banner--small:hover & {
        opacity: 1;
      }
    
      .banner--no-image & {
        display: none;
      }
    }
    
    .banner__content {
      flex: auto;
      position: relative;
      color: var(--color--neutrals-0);
    
      .banner--no-image & {
        @media (min-width: 900px) {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
        }
      }
    }
    
    .banner__play {
      position: absolute;
      bottom: var(--gutter--bucket);
      right: var(--gutter--bucket);
      display: block;
      width: 64px;
    }
    
    .banner__text {
      flex: auto;
    
      .banner:not(.banner--small) & {
        @media (min-width: 750px) {
          max-width: 75%;
        }
      }
    }
    
    .banner__heading {
      font-size: var(--h--3);
      line-height: 1.1875;
    }
    
    .banner__description {
      margin-top: calc(var(--gap) * 2);
      font-size: var(--p--1);
    
      @media (min-width: 900px) {
        margin-top: calc(var(--gap) * 4);
      }
    }
    
    .banner__action {
      flex: none;
      margin-top: calc(var(--gap) * 4);
    
      @media (min-width: 900px) {
        margin-top: calc(var(--gap) * 8);
      }
    
      .banner--no-image & {
        @media (min-width: 900px) {
          margin-top: 0;
        }
      }
    }
    
    .banner__link {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
    }
    
  • URL: /components/raw/banner/banner.scss
  • Filesystem Path: ../src/03_molecules/banner/banner.scss
  • Size: 2.6 KB

No notes defined.