<section class="col-two col-two--narrow">
    <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
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.