<div class="section section--pt-medium section--pb-medium section--background-1 not-found" data-theme="dark">
<div class="section__inner ">
<div class="section__content ">
<div class="h-container">
<div class="grid grid--center-md">
<div class="grid__col grid__col--md-7 not-found__content animation__target">
<h2>Whoops, that page is gone.</h2>
<div class="not-found__description text animation__target">
<p>The page you requested could not be found.</p>
</div>
<a href="#" class="button button--reverted button--magnetic not-found__button">
<span class="button__filler"></span>
<span class="button__inner">
<span class="button__text">Go home</span>
</span>
</a>
<figure class="image image--fill not-found__bg-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%20375%20525%22%3E%3C%2Fsvg%3E" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
{% set content %}
<div class="h-container">
<div class="grid grid--center-md">
<div class="grid__col grid__col--md-7 not-found__content animation__target">
{% if data.title %}
<h2>{{ data.title }}</h2>
{% endif %}
{% if data.description %}
<div class="not-found__description text animation__target">
{{ data.description }}
</div>
{% endif %}
{% if data.button %}
{% include '@button' with { data: data.button, class: 'not-found__button', modifier: 'button--reverted button--magnetic' } %}
{% endif %}
{% if data.image %}
{% include '@image' with { media: ['(min-width: 1000px)'], data: data.image|srcset('375x525', ['1280x560']), class: 'not-found__bg-image', modifier: 'image--fill' } %}
{% endif %}
</div>
</div>
</div>
{% endset %}
{% include '@section' with { class: 'not-found', modifier: 'section--pt-medium section--pb-medium section--background-1', data: { content: content } } %}
{
"language": "en-US",
"data": {
"image": true,
"title": "Whoops, that page is gone.",
"description": "<p>The page you requested could not be found.</p>",
"button": {
"text": "Go home",
"link": "#"
}
}
}
.not-found {
position: relative;
z-index: map-get($zindex, 'default');
min-height: 100vh;
display: flex;
align-items: center;
}
.section__inner {
.not-found & {
width: 100%;
}
}
.not-found__content {
text-align: center;
> * {
margin-top: 32px;
@include bp(sm-min) {
margin-top: 48px;
}
}
}
.not-found__bg-image {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.image__picture,
.image__img {
.not-found__bg-image & {
object-fit: cover; /* stylelint-disable-line plugin/no-unsupported-browser-features */
width: 100%;
height: 100%;
}
}
import './not-found.scss';