PDJ Brandbox

col-one: only visual 

<section class="col-one col-one--visual">
    <div class="col-one__inner">
        <div class="col-one__visual">
            <img src="http://placehold.it/1000x500?text&#x3D;Visual" alt="design award">
        </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>
</section>
 
visual:
  src: http://placehold.it/1000x500?text=Visual
  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.