PDJ Brandbox

col-two: narrow reversed 

<section class="col-two col-two--narrow 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">Artist name</h2>

                <div class="col-two__item__description">
                    Pioneer DJ Artist Masterclass session with iconic live artist and seminal producer, KiNK on the TORAIZ SP-16 sampler and AS-1 mono synth is now availabl…
                </div>

                <div class="col-two__labels gap--s--top-out-4">

                    <a href="#" class="label">product-name</a>

                </div>

                <div class="col-two__link gap--s--top-out-4">
                    <a href="#" target="_blank" class="link link--underlined">
                        <span class="link__label">This is a link</span>
                    </a>

                </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: Artist name
description: >-
  Pioneer DJ Artist Masterclass session with iconic live artist and seminal
  producer, KiNK on the TORAIZ SP-16 sampler and AS-1 mono synth is now
  availabl…
modifier: narrow
tinted: false
modifier2: reversed
link: true
label:
  url: '#'
  label: product-name
  • 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.