PDJ Brandbox

col-one 

<section class="col-one">
    <div class="col-one__inner">
        <div class="col-one__content">
            This 6-channel unit produces warm audio with energy and presence, and it’s loaded with unique features. So, take full control of your mix and enjoy the freedom to create something the crowd has never heard before – whether you’re performing solo
or back-to-back with another DJ.
        </div>
    </div>
</section>
 
<section class="col-one">
  <div class="col-one__inner">
    <div class="col-one__content">
      {{{ content }}}
    </div>
  </div>
</section>
 
visual:
  src: /graphics/award.png
  alt: design award
content: "This 6-channel unit produces warm audio with energy and presence, and it’s loaded with unique features. So, take full control of your mix and enjoy the freedom to create something the crowd has never heard before – whether you’re performing solo\Lor back-to-back with another DJ."
  • Content: 
    .col-one {
  padding: 0 var(--gutter--bucket);
}

.col-one--bg-color {
  padding: var(--gap--10) var(--gutter--bucket);
  background-color: var(--color--neutrals-1);

  @media (min-width: 900px) {
    padding: var(--gap--20) var(--gutter--bucket);
  }
}

.col-one__inner {
  max-width: var(--section--4);
  margin-right: auto;
  margin-left: auto;

  .col-one--visual & {
    text-align: center;
  }

  @media (min-width: 750px) {
    text-align: center;
  }

  & > * {
    margin-top: var(--gap--5);

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

    &:first-child {
      margin-top: 0;
    }
  }
}

.col-one__visual {
  img {
    display: initial;
    width: auto;
    max-width: 100%;
    height: auto;
  }
}

.col-one__content {
  max-width: var(--section--4);
  margin-right: auto;
  margin-left: auto;
  line-height: 1.375;

  #seeallvideos & {
    max-width: 100%;
  }

  .col-one:not(.col-one--visual) & {
    font-size: var(--h--7);
    font-weight: 700;
    line-height: 1.17;

    @media (min-width: 900px) {
      font-size: var(--h--4);
    }
  }
}
  • URL: /components/raw/col-one/col-one.scss
  • Filesystem Path: ../src/04_organisms/col-one/col-one.scss
  • Size: 1.1 KB

No notes defined.