PDJ Brandbox

col-two: Colored - grey 

<section class="col-two">
    <div class="col-two__inner" style="background-color:rgb(175,172,164);">
        <div class="col-two__item">
            <div class="col-two__visual">
                <picture class="visual">
                    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/grey-yellow-sweater.png">
                    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/grey-yellow-sweater.png">
                    <img data-sizes="auto" data-src="/graphics/grey-yellow-sweater.png" class="lazyload" alt="">
                </picture>

            </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: false
tinted: false
visual: true
image:
  src:
    mobile: /graphics/grey-yellow-sweater.png
    desktop: /graphics/grey-yellow-sweater.png
bg: rgb(175,172,164)
  • 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.