PDJ Brandbox

usp-small: 2 col 

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