<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
.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;
}
}
}
No notes defined.