<div class="usp-small usp-small--col-two">
    <div class="usp-small__inner">
        <div class="usp-small__items">
            <div class="usp-small__item">
                <div class="usp-snippet usp-snippet--C">
                    <div class="usp-snippet__visual">
                        <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 class="usp-snippet__content">
                        <h4 class="usp-snippet__title heading heading--7">Feature 1 title</h4>
                        <p class="usp-snippet__text p--2">Feature 1 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.</p>
                    </div>
                </div>

            </div>
            <div class="usp-small__item">
                <div class="usp-snippet usp-snippet--C">
                    <div class="usp-snippet__visual">
                        <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 class="usp-snippet__content">
                        <h4 class="usp-snippet__title heading heading--7">Feature 2 title lorum ipsum dolor sit amet</h4>
                        <p class="usp-snippet__text p--2">Feature 2 text 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>

            </div>
            <div class="usp-small__item">
                <div class="usp-snippet usp-snippet--C">
                    <div class="usp-snippet__visual">
                        <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 class="usp-snippet__content">
                        <h4 class="usp-snippet__title heading heading--7">Feature 3 title lorum ipsum dolor sit amet lorum ipsum dolor</h4>
                        <p class="usp-snippet__text p--2">Feature 3 text 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>

            </div>
            <div class="usp-small__item">
                <div class="usp-snippet usp-snippet--C">
                    <div class="usp-snippet__visual">
                        <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 class="usp-snippet__content">
                        <h4 class="usp-snippet__title heading heading--7">Feature 4 title lorum ipsum dolor sit amet lorum ipsum dolor</h4>
                        <p class="usp-snippet__text p--2">Feature 4 text 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>

            </div>
            <div class="usp-small__item">
                <div class="usp-snippet usp-snippet--C">
                    <div class="usp-snippet__visual">
                        <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 class="usp-snippet__content">
                        <h4 class="usp-snippet__title heading heading--7">Feature 5 title lorum ipsum dolor sit amet lorum ipsum dolor</h4>
                        <p class="usp-snippet__text p--2">Feature 5 text 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>

            </div>
        </div>
    </div>
</div>
<div class="usp-small{{#if modifier}} usp-small--{{ modifier }}{{/if}}">
  <div class="usp-small__inner">
    <div class="usp-small__items">
      {{#each usps}}
      <div class="usp-small__item">
        {{render '@usp-snippet--b' this }}
      </div>
      {{/each}}
    </div>
  </div>
</div>
modifier: col-two
usps:
  - modifier: C
    title: Feature 1 title
    text: >-
      Feature 1 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
      ipsum dolor sit amet.
    visual:
      src:
        mobile: /graphics/video-poster-mobile.jpg
        desktop: /graphics/video-poster.jpg
      alt: ''
  - modifier: C
    title: Feature 2 title lorum ipsum dolor sit amet
    text: >-
      Feature 2 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
      ipsum dolor sit amet.Feature  1 lorum ipsum dolor sit amet more info
    visual:
      src:
        mobile: /graphics/video-poster-mobile.jpg
        desktop: /graphics/video-poster.jpg
      alt: ''
  - modifier: C
    title: Feature 3 title lorum ipsum dolor sit amet lorum ipsum dolor
    text: >-
      Feature 3 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
      ipsum dolor sit amet.Feature  1 lorum ipsum dolor sit amet more info
    visual:
      src:
        mobile: /graphics/video-poster-mobile.jpg
        desktop: /graphics/video-poster.jpg
      alt: ''
  - modifier: C
    title: Feature 4 title lorum ipsum dolor sit amet lorum ipsum dolor
    text: >-
      Feature 4 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
      ipsum dolor sit amet.Feature  1 lorum ipsum dolor sit amet more info
    visual:
      src:
        mobile: /graphics/video-poster-mobile.jpg
        desktop: /graphics/video-poster.jpg
      alt: ''
  - modifier: C
    title: Feature 5 title lorum ipsum dolor sit amet lorum ipsum dolor
    text: >-
      Feature 5 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
      ipsum dolor sit amet.Feature  1 lorum ipsum dolor sit amet more info
    visual:
      src:
        mobile: /graphics/video-poster-mobile.jpg
        desktop: /graphics/video-poster.jpg
      alt: ''
  • Content:
    .usp-small {
      padding: 0 var(--gutter--bucket);
    }
    
    .usp-small__inner {
      max-width: var(--section--8);
      margin: 0 auto;
    
      @media screen and (min-width: 768px) {
        overflow: hidden;
      }
    }
    
    .usp-small__items {
      @media screen and (min-width: 768px) {
        display: flex;
        flex-wrap: wrap;
        margin: calc(var(--gap--4) * -1);
      }
    }
    
    .usp-small__item {
      margin-top: var(--gap--4);
    
      @media screen and (min-width: 768px) {
        flex: 0 0 50%;
        padding: var(--gap--4);
        margin-top: 0;
      }
    
      &:first-child {
        margin-top: 0;
      }
    }
    
  • URL: /components/raw/usp-small/usp-small.scss
  • Filesystem Path: ../src/04_organisms/usp-small/usp-small.scss
  • Size: 543 Bytes

No notes defined.