PDJ Brandbox

cloud 

<div class="cloud">
    <h1 class="mypage__titlewrap mypage__titlewrap--colored">
        <span>Lorem ipsum</span>
    </h1>

    <div class="spacer spacer--8"></div>

    <div class="cloud__steps">
        <div class="cloud__steps__wrapper">
            <div class="cloud__number">
                <span>1</span>
            </div>

            <div class="cloud__info">
                <span class="cloud__mark">Lorem ipsum</span>
                <h3 class="cloud__title">Professional</h3>
                <p class="cloud__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
            </div>

            <div class="cloud__visual">
                <img src="/graphics/pictgram-1.png" alt="">
            </div>
        </div>

        <div class="cloud__divider">
            <div class="cloud__divider__stroke"></div>
            <div class="arrow"></div>
            <div class="cloud__divider__stroke"></div>
        </div>
    </div>

    <div class="spacer spacer--4"></div>

    <div class="cloud__steps">
        <div class="cloud__steps__wrapper">
            <div class="cloud__number">
                <h1>2</h1>
            </div>

            <div class="cloud__info">
                <span class="cloud__mark cloud__mark--orange">Lorem ipsum</span>
                <h3 class="cloud__title">Dropbox</h3>
                <p class="cloud__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
            </div>

            <div class="cloud__visual">
                <img src="/graphics/pictgram-2.png" alt="">
            </div>
        </div>

        <div class="cloud__divider">
            <div class="cloud__divider__stroke"></div>
            <div class="arrow"></div>
            <div class="cloud__divider__stroke"></div>
        </div>
    </div>

    <div class="spacer spacer--4"></div>

    <div class="cloud__steps">
        <div class="cloud__steps__wrapper active">
            <div class="cloud__number">
                <h1>3</h1>
            </div>

            <div class="cloud__info">
                <span class="cloud__mark">Lorem ipsum</span>
                <h3 class="cloud__title">Rekordbox Cloud Unlimited</h3>
                <p class="cloud__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
            </div>

            <div class="cloud__visual">
                <img src="/graphics/pictgram-3.png" alt="">
            </div>
        </div>

        <div class="cloud__divider">
            <div class="cloud__divider__stroke"></div>
            <div class="arrow"></div>
            <div class="cloud__divider__stroke"></div>
        </div>
    </div>

    <div class="spacer spacer--4"></div>

    <div class="cloud__steps">
        <div class="cloud__steps__wrapper">
            <div class="cloud__number">
                <h1>4</h1>
            </div>

            <div class="cloud__info">
                <span class="cloud__mark cloud__mark--green">Lorem ipsum</span>
                <h3 class="cloud__title">Dropbox Professional</h3>
                <p class="cloud__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
            </div>

            <div class="cloud__visual">
                <img src="/graphics/pictgram-4.png" alt="">
            </div>
        </div>

        <div class="cloud__divider">
            <div class="cloud__divider__stroke"></div>
            <div class="arrow"></div>
            <div class="cloud__divider__stroke"></div>
        </div>
    </div>

    <div class="spacer spacer--4"></div>

    <div class="cloud__steps">
        <div class="cloud__steps__wrapper">
            <div class="cloud__number">
                <h1>5</h1>
            </div>

            <div class="cloud__info">
                <span class="cloud__mark">Lorem ipsum</span>
                <h3 class="cloud__title">Cloud Library Sync</h3>
                <p class="cloud__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
            </div>

            <div class="cloud__visual">
                <img src="/graphics/pictgram-5.png" alt="">
            </div>
        </div>

        <div class="cloud__divider">
            <div class="cloud__divider__stroke"></div>
            <div class="arrow"></div>
            <div class="cloud__divider__stroke"></div>
        </div>
    </div>

    <div class="spacer spacer--4"></div>
</div>
 
<div class="cloud">
  <h1 class="mypage__titlewrap mypage__titlewrap--colored">
    <span>Lorem ipsum</span>
  </h1>

  <div class="spacer spacer--8"></div>

  {{!-- First step --}}
  <div class="cloud__steps">
    <div class="cloud__steps__wrapper">
      <div class="cloud__number">
        <span>{{ number }}</span>
      </div>

      <div class="cloud__info">
        <span class="cloud__mark">{{ mark }}</span>
        <h3 class="cloud__title">{{ title }}</h3>
        <p class="cloud__text">{{ text }}</p>
      </div>

      <div class="cloud__visual">
        <img src="/graphics/pictgram-1.png" alt="">
      </div>
    </div>

    <div class="cloud__divider">
      <div class="cloud__divider__stroke"></div>
      <div class="arrow"></div>
      <div class="cloud__divider__stroke"></div>
    </div>
  </div>

  <div class="spacer spacer--4"></div>

  {{!-- Second step --}}
  <div class="cloud__steps">
    <div class="cloud__steps__wrapper">
      <div class="cloud__number">
        <h1>2</h1>
      </div>

      <div class="cloud__info">
        <span class="cloud__mark cloud__mark--orange">Lorem ipsum</span>
        <h3 class="cloud__title">Dropbox</h3>
        <p class="cloud__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
      </div>

      <div class="cloud__visual">
        <img src="/graphics/pictgram-2.png" alt="">
      </div>
    </div>

    <div class="cloud__divider">
      <div class="cloud__divider__stroke"></div>
      <div class="arrow"></div>
      <div class="cloud__divider__stroke"></div>
    </div>
  </div>

  <div class="spacer spacer--4"></div>

  {{!-- Third step --}}
  <div class="cloud__steps">
    <div class="cloud__steps__wrapper active">
      <div class="cloud__number">
        <h1>3</h1>
      </div>

      <div class="cloud__info">
        <span class="cloud__mark">Lorem ipsum</span>
        <h3 class="cloud__title">Rekordbox Cloud Unlimited</h3>
        <p class="cloud__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
      </div>

      <div class="cloud__visual">
        <img src="/graphics/pictgram-3.png" alt="">
      </div>
    </div>

    <div class="cloud__divider">
      <div class="cloud__divider__stroke"></div>
      <div class="arrow"></div>
      <div class="cloud__divider__stroke"></div>
    </div>
  </div>

  <div class="spacer spacer--4"></div>

  {{!-- Fourth step --}}
  <div class="cloud__steps">
    <div class="cloud__steps__wrapper">
      <div class="cloud__number">
        <h1>4</h1>
      </div>

      <div class="cloud__info">
        <span class="cloud__mark cloud__mark--green">Lorem ipsum</span>
        <h3 class="cloud__title">Dropbox Professional</h3>
        <p class="cloud__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
      </div>

      <div class="cloud__visual">
        <img src="/graphics/pictgram-4.png" alt="">
      </div>
    </div>

    <div class="cloud__divider">
      <div class="cloud__divider__stroke"></div>
      <div class="arrow"></div>
      <div class="cloud__divider__stroke"></div>
    </div>
  </div>

  <div class="spacer spacer--4"></div>

  {{!-- Fifth step --}}
  <div class="cloud__steps">
    <div class="cloud__steps__wrapper">
      <div class="cloud__number">
        <h1>5</h1>
      </div>

      <div class="cloud__info">
        <span class="cloud__mark">Lorem ipsum</span>
        <h3 class="cloud__title">Cloud Library Sync</h3>
        <p class="cloud__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
      </div>

      <div class="cloud__visual">
        <img src="/graphics/pictgram-5.png" alt="">
      </div>
    </div>

    <div class="cloud__divider">
      <div class="cloud__divider__stroke"></div>
      <div class="arrow"></div>
      <div class="cloud__divider__stroke"></div>
    </div>
  </div>

  <div class="spacer spacer--4"></div>
</div>
 
number: 1
mark: Lorem ipsum
title: Professional
text: >-
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore.
visual:
  src: /graphics/pictgram-1.png
checkbox:
  label: Lorem ipsum
  checked: false
actions:
  - type: normal
    tint: on-light
    url: '#'
    label: Lorem ipsum
    disabled: false
    class: ''
    target: _blank
  • Content: 
    .cloud {
  &__heading {
      color: var(--color--action);
      border-bottom: 1px solid var(--color--neutrals-3);
      padding-bottom: var(--gap--8);

      &--center {
          display: flex;
          justify-content: center;
          border-bottom: none;
          color: var(--color--neutrals-10);
      }
  }

  &__steps {
      &__wrapper {
          padding: var(--gap--4) 0;
          padding-bottom: var(--gap--8);

          @media all and (min-width: 750px) {
              display: flex;
              align-items: flex-start;
              gap: var(--gap--8);
          }

          &.active {
            border: 3px solid var(--color--action);
            border-style: dashed;
            border-radius: var(--gap--3);
            padding: var(--gap--4);
            margin: var(--gap--4) 0;
        }
      }
  }

  &__number {
      color: var(--color--action);
      padding-bottom: var(--gap--4);
      font-size: var(--h--1);

      @media all and (min-width: 750px) {
          padding-bottom: 0;
      }
  }

  &__info {
      margin-top: var(--gap--2);
  }

  &__mark {
      display: inline-block;
      color: var(--color--action);
      border: 1px solid var(--color--action);
      border-radius: var(--gap--8);
      padding: var(--gap--2) var(--gap--4);

      &--orange {
          color: #F2A43A;
          border: 1px solid #F2A43A;
      }

      &--green {
          color: #28E214;
          border: 1px solid #28E214;
      }
  }

  &__title {
      padding-top: var(--gap--4);
  }

  &__text {
      padding-bottom: var(--gap--8);

      @media all and (min-width: 750px) {
          padding-bottom: 0;
          padding-right: var(--gap--8);
      }
  }

  &__visual {
      width: 160px;
      height: 160px;
      top: 0;
      right: 0;
      margin: 0 auto;

      @media all and (min-width: 750px) {
          margin: 0;
      }

      img {
          height: 100%;
      }
  }

  &__divider {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      &__stroke {
          width: 45%;
          height: 50%;
          border-bottom: 1px solid var(--color--neutrals-3);
      }
  }
}

.arrow {
  width: 0;
  height: 0;
  border-top: var(--gap--8) solid var(--color--neutrals-3);
  border-right: var(--gap--6) solid transparent;
  border-left: var(--gap--6) solid transparent;
}

.cloud__validate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gap--8) 0;

  &__field {
      border-top: 1px solid var(--color--neutrals-3);
      border-bottom: 1px solid var(--color--neutrals-3);
      padding: var(--gap--10) 0;
      text-align: center;

      .checkbox {
        display: inline-flex;
      }
  }
}
  • URL: /components/raw/cloud/cloud.scss
  • Filesystem Path: ../src/04_organisms/cloud/cloud.scss
  • Size: 2.7 KB

No notes defined.