PDJ Brandbox

usp-snippet: B 

<div class="usp-snippet usp-snippet--B">
    <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 lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info</h4>
        <p class="usp-snippet__text p--2">Feature 1 text lorem 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 class="usp-snippet{{#if modifier}} usp-snippet--{{ modifier }}{{/if}}">
  {{#if visual }}
  <div class="usp-snippet__visual">
    {{render '@visual' visual merge=true }}
  </div>
  {{/if}}
  <div class="usp-snippet__content">
    {{#if title }}
    <h4 class="usp-snippet__title heading heading--7">{{ title }}</h4>
    {{/if}}
    {{#if text }}
    <p class="usp-snippet__text p--2">{{ text }}</p>
    {{/if}}
  </div>
</div>
 
modifier: B
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
intro: >-
  Feature 1 intro lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
  ipsum dolor sit amet.Feature  1 lorum ipsum dolor sit amet more info
text: >-
  Feature 1 text lorem 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: ''
actions:
  - url: '#'
    modifier: underlined
    label: Learn more
  - url: '#'
    modifier: underlined
    label: Learn more
  • Content: 
    .usp-snippet {
  &.usp-snippet--A {
    text-align: center;

    @media screen and (min-width: 768px) {
      text-align: left;
    }
  }

  &.usp-snippet--B,
  &.usp-snippet--C {
    display: flex;
  }
}

.usp-snippet__visual {
  background: var(--color--neutrals-1);
  height: 95px;
  position: relative;

  @media screen and (min-width: 768px) {
    margin-left: 0;
  }

  .usp-snippet--A & {
    margin: 0 auto var(--gap--4);
    width: 95px;
  }

  .usp-snippet--B &,
  .usp-snippet--C & {
    width: 80px;
    height: 80px;
    margin-right: var(--gap--3);
    flex: 0 0 auto;

    @media screen and (min-width: 768px) {
      width: 160px;
      height: 160px;
      margin-right: var(--gap--8);
    }
  }
}

.usp-snippet__content {
  .usp-snippet--B &,
  .usp-snippet--C & {
    flex: 1 1 auto;
  }

  .usp-snippet--C & {
    @media screen and (min-width: 768px) {
      display: flex;
      flex-flow: column;
      justify-content: center;
    }
  }
}

.usp-snippet__title, .usp-snippet__text {
  margin-bottom: var(--gap--1);
}

.usp-snippet__intro {
  margin-bottom: var(--gap--2);
}

.usp-snippet__links {
  margin-top: var(--gap--1);

  & > a {
    margin-left: var(--gap--2);

    &:first-child {
      margin-left: 0;
    }
  }
}
  • URL: /components/raw/usp-snippet/usp-snippet.scss
  • Filesystem Path: ../src/03_molecules/usp-snippet/usp-snippet.scss
  • Size: 1.2 KB

No notes defined.