PDJ Brandbox

col-one: with visual 

<section class="col-one col-one--visual">
    <div class="col-one__inner">
        <div class="col-one__visual">
            <img src="/graphics/award.png" alt="design award">
        </div>

        <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 col-one--visual">
  <div class="col-one__inner">
    <div class="col-one__visual">
      <img src="{{ visual.src }}" alt="{{ visual.alt }}">
    </div>

    <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.