PDJ Brandbox

banner: square 

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

    <picture class="visual">
        <img data-sizes="auto" data-src="/graphics/instagram.png" class="lazyload" alt="">
    </picture>

    <div class="banner__play">
        <span class="icon-play">
            <span class="icon-play__inner"></span>
            <span class="icon-play__icon">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                    <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                </svg>
            </span>
        </span>
    </div>

    <a href="" class="banner__link" target="_blank"></a>
</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>
 
size: square
videoLink: true
visual:
  src: /graphics/instagram.png
link:
  url: ''
  target: _blank
  • 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.