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