<div class="explore ">
<figure class="image explore__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20548%20324%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/548x324 548w, //via.placeholder.com/1096x648 1096w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<h3 class="h3 explore__title">Learn more about gotoAndPlay</h3>
<div class="text explore__description">Creating memorable experiences with web technologies.</div>
<a href="#" class="button button--arrow-rotate button--magnetic explore__button button--icon-right" target="_blank">
<span class="button__filler"></span>
<span class="button__inner">
<span class="button__icon-wrapper"><svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-right-top-24"></use>
</svg>
</span> <span class="button__text">Explore</span>
</span>
</a>
</div>
<div class="explore {{ class }} {{ modifier }}">
{% if data.image %}
{% include '@image' with {data: data.image|srcset('548x324'), modifier: '', class: 'explore__image'} %}
{% endif %}
{% if data.title %}
<h3 class="h3 explore__title">{{ data.title }}</h3>
{% endif %}
{% if data.description %}
<div class="text explore__description">{{ data.description }}</div>
{% endif %}
{% if data.button %}
{% include '@button' with {data: data.button|merge({icon: 'tiny-right-top-24', iconPosition: 'right'}), modifier: 'button--arrow-rotate button--magnetic', class: 'explore__button'} %}
{% endif %}
</div>
{
"language": "en-US",
"data": {
"title": "Learn more about gotoAndPlay",
"description": "Creating memorable experiences with web technologies.",
"image": true,
"button": {
"text": "Explore",
"link": "#",
"attributes": "target=\"_blank\""
}
}
}
.explore__title {
margin-top: 24px;
@include bp(sm-min) {
margin-top: 32px;
}
}
.explore__description {
margin-top: 16px;
}
.explore__button {
margin-top: 16px;
@include bp(sm-min) {
margin-top: 24px;
}
}
.explore__image {
display: block;
overflow: hidden;
position: relative;
@include aspect-ratio(548, 324, 'image__img');
background: $color-ui-01;
}
.image__img {
.explore__image & {
width: 100%;
}
}
import './explore.scss';