PDJ Brandbox

usp-key: visual left 

<div class="usp-key usp-key--visual">
    <div class="usp-key__inner">
        <div class="usp-key__visual">
            <div class="usp-key__visual__inner">
                <picture class="visual">
                    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
                    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
                    <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
                </picture>

            </div>
        </div>
        <div class="usp-key__items">
            <div class="usp-key__item">
                <div class="usp-snippet">
                    <div class="usp-snippet__content">
                        <p class="usp-snippet__title heading heading--7">Feature 1 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info</p>
                    </div>
                    <div class="usp-snippet__links">
                        <a href="#" class="link link--underlined">
                            <span class="link__label">Learn more</span>
                        </a>

                    </div>
                </div>

            </div>
            <div class="usp-key__item">
                <div class="usp-snippet">
                    <div class="usp-snippet__content">
                        <p class="usp-snippet__title heading heading--7">Feature 2 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info</p>
                    </div>
                    <div class="usp-snippet__links">
                        <a href="#" class="link link--underlined">
                            <span class="link__label">Learn more</span>
                        </a>

                    </div>
                </div>

            </div>
            <div class="usp-key__item">
                <div class="usp-snippet">
                    <div class="usp-snippet__content">
                        <p class="usp-snippet__title heading heading--7">Feature 3 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info</p>
                    </div>
                    <div class="usp-snippet__links">
                        <a href="#" class="link link--underlined">
                            <span class="link__label">Learn more</span>
                        </a>

                    </div>
                </div>

            </div>
            <div class="usp-key__item">
                <div class="usp-snippet">
                    <div class="usp-snippet__content">
                        <p class="usp-snippet__title heading heading--7">Feature 4 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info</p>
                    </div>
                    <div class="usp-snippet__links">
                        <a href="#" class="link link--underlined">
                            <span class="link__label">Learn more</span>
                        </a>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
 
<div class="usp-key{{#if modifier}} usp-key--{{ modifier }}{{/if}}">
  <div class="usp-key__inner">
    {{#if visual }}
    <div class="usp-key__visual">
      <div class="usp-key__visual__inner">
        {{render '@visual' visual merge=true }}
      </div>
    </div>
    {{/if }}
    <div class="usp-key__items">
      {{#each usps}}
      <div class="usp-key__item">
        {{render '@usp-snippet' this }}
      </div>
      {{/each}}
    </div>
  </div>
</div>
 
visual:
  src:
    mobile: /graphics/video-poster-mobile.jpg
    desktop: /graphics/video-poster.jpg
  alt: ''
modifier: visual
usps:
  - modifier: ''
    title: >-
      Feature 1 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
      ipsum dolor sit amet.Feature  1 lorum ipsum dolor sit amet more info
    actions:
      - url: '#'
        modifier: underlined
        label: Learn more
  - modifier: ''
    title: >-
      Feature 2 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
      ipsum dolor sit amet.Feature  1 lorum ipsum dolor sit amet more info
    actions:
      - url: '#'
        modifier: underlined
        label: Learn more
  - modifier: ''
    title: >-
      Feature 3 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
      ipsum dolor sit amet.Feature  1 lorum ipsum dolor sit amet more info
    actions:
      - url: '#'
        modifier: underlined
        label: Learn more
  - modifier: ''
    title: >-
      Feature 4 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
      ipsum dolor sit amet.Feature  1 lorum ipsum dolor sit amet more info
    actions:
      - url: '#'
        modifier: underlined
        label: Learn more
  • Content: 
    .usp-key {
  --usp-key-width: 100%;
  --usp-key-gap: var(--gap--4);
  --usp-key-offset: calc((100vw - var(--section--8)) / 2);

  padding: var(--gap--3) 0;
  overflow: hidden;

  // section--8
  display: block;
  flex: 1 1 auto;
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;

  &__inner {
    display: flex;
    flex-flow: column;
  }

  &__items {
    display: flex;
    flex-flow: column;
    flex-shrink: 0;
  }

  &__item {
    // padding: 0 var(--gap--4);

    .usp-snippet {
      border-bottom: var(--divider);
    }

    &:last-child {
      .usp-snippet {
        border-bottom: none;
      }
    }
  }

  &__visual {
    width: 100%;

    &__inner {
      height: 0;
      position: relative;
      padding-top: 73.58%;
      width: 100%;
    }
  }

  .usp-snippet {
    padding-top: var(--gap--3);
    padding-bottom: var(--gap--3);
    text-align: left;
  }

  &--visual, &--visual-reversed {
    .usp-key {
      &__items {
        width: var(--usp-key-width);
      }
    }
  }

  @media screen and (min-width: 768px) {
    &__items {
      flex-flow: row wrap;
    }

    &__item {
      width: 33.33%;
    }

    &:not(.usp-key--visual):not(.usp-key--visual-reversed) {
      .usp-key__items {
        margin-left: calc(var(--usp-key-gap) * -1);
        margin-right: calc(var(--usp-key-gap) * -1);
      }
      .usp-key__item {
        padding-left: var(--usp-key-gap);
        padding-right: var(--usp-key-gap);

        .usp-snippet {
          border-bottom: none;
        }
      }
    }

    &--visual, &--visual-reversed {
      .usp-key {
        &__inner {
          align-items: center;
        }

        &__item {
          width: 50%;

          &:nth-child(2n) {
            padding-left: var(--usp-key-gap);
          }
          &:nth-child(2n + 1) {
            padding-right: var(--usp-key-gap);
          }

          &:nth-child(3) {
            .usp-snippet {
              border-bottom: none;
            }
          }
        }
      }

      .usp-snippet {
        padding-top: var(--gap--9);
        padding-bottom: var(--gap--9);
      }
    }
  }

  @media screen and (min-width: 1024px) {
    --usp-key-width: calc(66.66% + var(--gap--1));

    &--visual, &--visual-reversed  {
      .usp-key {
        &__inner {
          display: flex;
          flex-flow: row nowrap;
        }

        &__visual {
          height: 0;
          position: relative;

          &__inner {
            right: 0;
            position: absolute;
            top: 0;
            transform: translateY(-50%);
          }
        }
      }
    }

    &--visual {
      .usp-key {
        &__visual {
          margin-right: var(--usp-key-gap);
        }

        &__items {
          padding-left: var(--usp-key-gap);
        }
      }
    }

    &--visual-reversed {
      .usp-key {
        &__visual {
          order: 2;
          margin-left: var(--usp-key-gap);
        }

        &__items {
          padding-right: var(--usp-key-gap);
        }
      }
    }
  }
  @media screen and (min-width: 1140px) {
    overflow: initial;

    &--visual {
      .usp-key {
        &__visual {
          margin-left: calc(var(--usp-key-offset) * -1);
        }
      }
    }

    &--visual-reversed {
      .usp-key {
        &__visual {
          margin-right: calc(var(--usp-key-offset) * -1);
        }
      }
    }
  }

  @media screen and (min-width: 1440px) {
    --usp-key-offset: calc((var(--section--9) - var(--section--8)) / 2);

    &--visual, &--visual-reversed {
      .usp-key {
        &__visual {
          width: calc(100% - var(--usp-key-width) - var(--usp-key-gap) + var(--usp-key-offset));
        }
      }
    }
  }
}
  • URL: /components/raw/usp-key/usp-key.scss
  • Filesystem Path: ../src/04_organisms/usp-key/usp-key.scss
  • Size: 3.7 KB

No notes defined.