PDJ Brandbox

col-two: reversed 

<section class="col-two col-two--reversed">
    <div class="col-two__inner">
        <div class="col-two__item">
            <div class="col-two__visual">
                <div class="video-player">
                    <picture class="visual">
                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
                        <img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
                    </picture>

                    <span class="video-player__trigger">
                        <span class="video-ID">agkb5TSjEmc</span>

                        <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>
                    </span>
                </div>

            </div>
        </div>

        <div class="col-two__item">
            <div class="col-two__content">
                <h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>

                <div class="col-two__item__description">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                </div>

            </div>
        </div>
    </div>
</section>
 
<section class="col-two{{#if modifier}} col-two--{{ modifier }}{{/if}}{{#if modifier2}} col-two--{{ modifier2 }}{{/if}}{{#if light}} col-two--light{{/if}}">
  <div class="col-two__inner{{#if tinted}} bgc--neutrals-1{{/if}}"{{#if bg}} style="background-color:{{bg}};"{{/if}}>
    <div class="col-two__item">
      <div class="col-two__visual">
        {{#if visual }}
          {{render '@visual' image merge=true }}
        {{else}}
          {{render '@video-player' }}
        {{/if}}
      </div>
    </div>

    <div class="col-two__item">
      <div class="col-two__content">
        <h2 class="col-two__heading heading heading--5">{{{ heading }}}</h2>

        <div class="col-two__item__description">
          {{{ description }}}
        </div>

        {{#if more }}
          <div class="gap--s--top-out-2">
            {{render '@overlay-content' }}
          </div>
        {{/if}}

        {{#if label }}
          <div class="col-two__labels gap--s--top-out-4">
            {{render '@label' label merge=true }}
          </div>
        {{/if}}

        {{#if link }}
          <div class="col-two__link gap--s--top-out-4">
            {{render '@link--underlined' link merge=true }}
          </div>
        {{/if}}
      </div>
    </div>
  </div>
</section>
 
heading: >-
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor.
description: >-
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem
  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
modifier: reversed
tinted: false
  • Content: 
    .col-two {
  padding: 0 var(--gutter--bucket) !important;

  @media (min-width: 750px) {
    overflow: hidden;
  }
}

.col-two--narrow {
  position: relative;
}

.col-two__inner {
  position: relative;
  max-width: var(--section--8);
  margin: 0 auto;

  @media (min-width: 750px) {
    display: flex;
    flex-wrap: wrap;

    .col-two--reversed & {
      flex-direction: row-reverse;

      .col-two:not(.col-two--reversed) .col-two__inner {
        flex-direction: row;
      }
    }
  }
}

.col-two__inner:before {
  .col-two--narrow & {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color--neutrals-1);
    content: '';
  }
}

.col-two__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  @media (min-width: 750px) {
    flex: 0 0 50%;
    min-height: 275px;
  }
}

.col-two__visual {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;

  .col-two--narrow & {
    position: static;
    padding-top: (360 / 540) * 100%;
  }
}

.col-two__content {
  flex: 1 1 auto;
  padding: var(--gap--8);

  @media (min-width: 750px) {
    max-width: calc(var(--section--2) + (var(--gap--8) * 2));
    padding: var(--gap--8);
  }
}

.col-two__heading {
  .col-two--narrow & {
    font-size: var(--p--1);
    font-weight: 500;
  }
}

.col-two__item__description {
  margin-top: var(--gap--4);
  color: var(--color--neutrals-7);

  @media (min-width: 750px) {
    margin-top: var(--gap--8);
  }

  .col-two--narrow & {
    @media (min-width: 750px) {
      margin-top: var(--gap--4);
    }
  }
}

.col-two--light {
  color: var(--color--neutrals-0);

  .col-two__item__description {
    color: inherit;
  }
}
  • URL: /components/raw/col-two/col-two.scss
  • Filesystem Path: ../src/04_organisms/col-two/col-two.scss
  • Size: 1.7 KB

No notes defined.