PDJ Brandbox

banner 

<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.