<div class="usp-snippet usp-snippet--A">
    <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">
        <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>
        <p class="usp-snippet__intro"><strong>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</strong></p>
        <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 class="usp-snippet__links">
        <a href="#" class="link link--underlined">
            <span class="link__label">Learn more</span>
        </a>

        <a href="#" class="link link--underlined">
            <span class="link__label">Learn more</span>
        </a>

    </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 }}
    <p class="usp-snippet__title heading heading--7">{{ title }}</p>
    {{/if}}
    {{#if intro }}
    <p class="usp-snippet__intro"><strong>{{ intro }}</strong></p>
    {{/if}}
    {{#if text }}
    <p class="usp-snippet__text p--2">{{ text }}</p>
    {{/if}}
  </div>
  {{#if actions }}
  <div class="usp-snippet__links">
    {{#each actions }}
      {{render '@link' this merge=true }}
    {{/each}}
  </div>
  {{/if}}
</div>
modifier: A
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.