<article class="snippet-a">
<a href="#" class="snippet-a__visual">
<div class="snippet-a__image">
<picture class="visual">
<img data-sizes="auto" data-src="https://via.placeholder.com/260x245" class="lazyload" alt="">
</picture>
</div>
</a>
<div class="snippet-a__content">
<h4 class="snippet-a__heading heading">
<a href="" class="link link--default">
<span class="link__label">Heading 22 chars max</span>
</a>
</h4>
<span class="snippet-a__subheading">Subheading</span>
<div class="snippet-a__description">
Description text within a range 300 a 350 chars. Ipsa nemo repellendus molestias. Doloremque, Aut quae quisquam vitae architecto, quasi esse incidunt. Explicabo asperiores, quidem excepturi veniam eos odio tenetur corporis! Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa nemo repellendus molestias. Doloremque.
</div>
</div>
<div class="snippet-a__actions actions actions--start">
<div class="actions__item">
<a href="#" class="link link--colored">
<span class="link__label">Link</span>
</a>
</div>
</div>
</article>
<article class="snippet-a{{#if modifier}} snippet-a--{{ modifier }}{{/if}}">
<a href="{{ action.url }}" class="snippet-a__visual">
<div class="snippet-a__image">
{{render '@visual' visual merge=true }}
</div>
</a>
{{#unless visualonly }}
<div class="snippet-a__content">
{{#if heading }}
<h4 class="snippet-a__heading heading{{#if heading.size}} heading--{{ heading.size }}{{/if}}">
{{render '@link' heading merge=true }}
</h4>
{{/if}}
{{#if subheading }}
<span class="snippet-a__subheading">{{ subheading }}</span>
{{/if}}
{{#if description }}
<div class="snippet-a__description">
{{ description }}
</div>
{{/if}}
</div>
{{/unless}}
{{#if action.label }}
<div class="snippet-a__actions actions actions--start">
<div class="actions__item">
{{render '@link--colored' action merge=true }}
</div>
</div>
{{/if}}
</article>
modifier: false
visual:
src: https://via.placeholder.com/260x245
heading:
size: false
url: ''
label: Heading 22 chars max
modifier: default
subheading: Subheading
description: >-
Description text within a range 300 a 350 chars. Ipsa nemo repellendus
molestias. Doloremque, Aut quae quisquam vitae architecto, quasi esse
incidunt. Explicabo asperiores, quidem excepturi veniam eos odio tenetur
corporis! Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa nemo
repellendus molestias. Doloremque.
action:
url: '#'
label: Link
.snippet-a {
flex: 1 1 auto;
display: flex;
flex-direction: column;
user-select: none;
}
.snippet-a__visual {
flex: 0 0 auto;
display: block;
overflow: hidden;
background-color: var(--color--neutrals-1);
}
.snippet-a__image {
transition: transform 700ms;
position: relative;
display: block;
width: 100%;
height: 0;
padding-top: 100%;
backface-visibility: hidden;
.snippet-a--narrow & {
padding-top: 56.6%;
}
.snippet-a__visual:hover & {
transform: scale(1.05);
}
}
.snippet-a__content {
flex: 1 1 auto;
margin-top: var(--gap--4);
font-size: 12px;
}
.snippet-a__heading {
position: relative;
display: inline-block;
width: auto;
font-size: 14px;
font-weight: 700;
}
.snippet-a__heading:after {
.snippet-a__inner:hover & {
transform: translate(-50%, .75em);
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100%;
height: 1px;
background-color: currentColor;
content: '' !important;
backface-visibility: hidden;
}
}
.snippet-a__subheading {
display: block;
margin-top: var(--gap--1);
color: var(--color--neutrals-6);
}
.snippet-a__description {
width: 85%;
margin-top: var(--gap--2);
}
.snippet-a__actions {
flex: 0 0 auto;
margin-top: var(--gap--3);
font-size: 12px;
}
No notes defined.