System Error

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="m-system-error">
    <div class="m-system-error__content">
        <h1 class="m-system-error__heading">404</h1>
        <p class="preamble">Sidan du eftersökte kunde tyvärr inte hittas.</p>
        <p>Försök <a href="#" class="js-history">backa i webbläsaren</a> eller gå till <a href="/">startsidan</a>.</p>
        <hr>
        <em>404 error - Sidan kan inte hittas</em>
    </div>
</div>
<style>
    @keyframes rumble {
        1% {
            transform: rotate(0deg);
        }

        1.2% {
            transform: translate(1.1111111111rem, 0) rotate(-10deg);
        }

        1.4% {
            transform: translate(0, -1.1111111111rem) rotate(0deg);
        }

        1.6% {
            transform: translate(-1.1111111111rem, 0) rotate(10deg);
        }

        1.8% {
            transform: translate(0, 1.1111111111rem) rotate(0deg);
        }

        2% {
            transform: rotate(0deg);
        }

        2.2% {
            transform: translate(1.1111111111rem, 0) rotate(-10deg);
        }

        2.4% {
            transform: translate(0, -1.1111111111rem) rotate(0deg);
        }

        2.6% {
            transform: translate(-1.1111111111rem, 0) rotate(10deg);
        }

        2.8% {
            transform: translate(0, 1.1111111111rem) rotate(0deg);
        }

        3% {
            transform: rotate(0deg);
        }

        3.2% {
            transform: translate(1.1111111111rem, 0) rotate(-10deg);
        }

        3.4% {
            transform: translate(0, -1.1111111111rem) rotate(0deg);
        }

        3.6% {
            transform: translate(-1.1111111111rem, 0) rotate(10deg);
        }

        3.8% {
            transform: translate(0, 1.1111111111rem) rotate(0deg);
        }

        4% {
            transform: rotate(0deg);
        }

        4.2% {
            transform: translate(1.1111111111rem, 0) rotate(-10deg);
        }

        4.4% {
            transform: translate(0, -1.1111111111rem) rotate(0deg);
        }

        4.6% {
            transform: translate(-1.1111111111rem, 0) rotate(10deg);
        }

        4.8% {
            transform: translate(1.1111111111rem, 0) rotate(0deg);
        }

        5% {
            transform: rotate(0deg);
        }

        5.2% {
            transform: translate(1.1111111111rem, 0) rotate(-10deg);
        }

        5.4% {
            transform: translate(0, -1.1111111111rem) rotate(0deg);
        }

        5.6% {
            transform: translate(-1.1111111111rem, 0) rotate(10deg);
        }

        5.8% {
            transform: translate(0, 1.1111111111rem) rotate(0deg);
        }

        6% {
            transform: rotate(0deg);
        }

        6.2% {
            transform: translate(1.1111111111rem, 0) rotate(-10deg);
        }

        6.4% {
            transform: translate(0, -1.1111111111rem) rotate(0deg);
        }

        6.6% {
            transform: translate(-1.1111111111rem, 0) rotate(10deg);
        }

        6.8% {
            transform: translate(0, 1.1111111111rem) rotate(0deg);
        }

        7% {
            transform: rotate(0deg);
        }

        7.2% {
            transform: translate(1.1111111111rem, 0) rotate(-10deg);
        }

        7.4% {
            transform: translate(0, -1.1111111111rem) rotate(0deg);
        }

        7.6% {
            transform: translate(-1.1111111111rem, 0) rotate(10deg);
        }

        7.8% {
            transform: translate(0, 1.1111111111rem) rotate(0deg);
        }

        8% {
            transform: rotate(0deg);
        }

        8.2% {
            transform: translate(1.1111111111rem, 0) rotate(-10deg);
        }

        8.4% {
            transform: translate(0, -1.1111111111rem) rotate(0deg);
        }

        8.6% {
            transform: translate(-1.1111111111rem, 0) rotate(10deg);
        }

        8.8% {
            transform: translate(0, 1.1111111111rem) rotate(0deg);
        }

        9% {
            transform: rotate(0deg);
        }

        9.2% {
            transform: translate(1.1111111111rem, 0) rotate(-10deg);
        }

        9.4% {
            transform: translate(0, -1.1111111111rem) rotate(0deg);
        }

        9.6% {
            transform: translate(-1.1111111111rem, 0) rotate(10deg);
        }

        9.8% {
            transform: translate(0, 1.1111111111rem) rotate(0deg);
        }

        10% {
            transform: rotate(0deg);
        }

        10.2% {
            transform: translate(1.1111111111rem, 0) rotate(-10deg);
        }

        10.4% {
            transform: translate(0, -1.1111111111rem) rotate(0deg);
        }

        10.6% {
            transform: translate(-1.1111111111rem, 0) rotate(10deg);
        }

        10.8% {
            transform: translate(0, 1.1111111111rem) rotate(0deg);
        }

        11% {
            transform: rotate(0deg);
        }
    }
</style>


        <div class="m-system-error">
	<div class="m-system-error__content">
		<h1 class="m-system-error__heading">{{errorCode}}</h1>
		<p class="preamble">{{preamble}}</p>
		<p>{{{suggestion}}}</p>
		<hr>
		<em>{{errorCode}} {{errorMessage}}</em>
	</div>
</div>
<style>
	@keyframes rumble {
  1% {
    transform: rotate(0deg);
  }
  1.2% {
    transform: translate(1.1111111111rem, 0) rotate(-10deg);
  }
  1.4% {
    transform: translate(0, -1.1111111111rem) rotate(0deg);
  }
  1.6% {
    transform: translate(-1.1111111111rem, 0) rotate(10deg);
  }
  1.8% {
    transform: translate(0, 1.1111111111rem) rotate(0deg);
  }
  2% {
    transform: rotate(0deg);
  }
  2.2% {
    transform: translate(1.1111111111rem, 0) rotate(-10deg);
  }
  2.4% {
    transform: translate(0, -1.1111111111rem) rotate(0deg);
  }
  2.6% {
    transform: translate(-1.1111111111rem, 0) rotate(10deg);
  }
  2.8% {
    transform: translate(0, 1.1111111111rem) rotate(0deg);
  }
  3% {
    transform: rotate(0deg);
  }
  3.2% {
    transform: translate(1.1111111111rem, 0) rotate(-10deg);
  }
  3.4% {
    transform: translate(0, -1.1111111111rem) rotate(0deg);
  }
  3.6% {
    transform: translate(-1.1111111111rem, 0) rotate(10deg);
  }
  3.8% {
    transform: translate(0, 1.1111111111rem) rotate(0deg);
  }
  4% {
    transform: rotate(0deg);
  }
  4.2% {
    transform: translate(1.1111111111rem, 0) rotate(-10deg);
  }
  4.4% {
    transform: translate(0, -1.1111111111rem) rotate(0deg);
  }
  4.6% {
    transform: translate(-1.1111111111rem, 0) rotate(10deg);
  }
  4.8% {
    transform: translate(1.1111111111rem, 0) rotate(0deg);
  }
  5% {
    transform: rotate(0deg);
  }
  5.2% {
    transform: translate(1.1111111111rem, 0) rotate(-10deg);
  }
  5.4% {
    transform: translate(0, -1.1111111111rem) rotate(0deg);
  }
  5.6% {
    transform: translate(-1.1111111111rem, 0) rotate(10deg);
  }
  5.8% {
    transform: translate(0, 1.1111111111rem) rotate(0deg);
  }
  6% {
    transform: rotate(0deg);
  }
  6.2% {
    transform: translate(1.1111111111rem, 0) rotate(-10deg);
  }
  6.4% {
    transform: translate(0, -1.1111111111rem) rotate(0deg);
  }
  6.6% {
    transform: translate(-1.1111111111rem, 0) rotate(10deg);
  }
  6.8% {
    transform: translate(0, 1.1111111111rem) rotate(0deg);
  }
  7% {
    transform: rotate(0deg);
  }
  7.2% {
    transform: translate(1.1111111111rem, 0) rotate(-10deg);
  }
  7.4% {
    transform: translate(0, -1.1111111111rem) rotate(0deg);
  }
  7.6% {
    transform: translate(-1.1111111111rem, 0) rotate(10deg);
  }
  7.8% {
    transform: translate(0, 1.1111111111rem) rotate(0deg);
  }
  8% {
    transform: rotate(0deg);
  }
  8.2% {
    transform: translate(1.1111111111rem, 0) rotate(-10deg);
  }
  8.4% {
    transform: translate(0, -1.1111111111rem) rotate(0deg);
  }
  8.6% {
    transform: translate(-1.1111111111rem, 0) rotate(10deg);
  }
  8.8% {
    transform: translate(0, 1.1111111111rem) rotate(0deg);
  }
  9% {
    transform: rotate(0deg);
  }
  9.2% {
    transform: translate(1.1111111111rem, 0) rotate(-10deg);
  }
  9.4% {
    transform: translate(0, -1.1111111111rem) rotate(0deg);
  }
  9.6% {
    transform: translate(-1.1111111111rem, 0) rotate(10deg);
  }
  9.8% {
    transform: translate(0, 1.1111111111rem) rotate(0deg);
  }
  10% {
    transform: rotate(0deg);
  }
  10.2% {
    transform: translate(1.1111111111rem, 0) rotate(-10deg);
  }
  10.4% {
    transform: translate(0, -1.1111111111rem) rotate(0deg);
  }
  10.6% {
    transform: translate(-1.1111111111rem, 0) rotate(10deg);
  }
  10.8% {
    transform: translate(0, 1.1111111111rem) rotate(0deg);
  }
  11% {
    transform: rotate(0deg);
  }
}
</style>


        
            
            {
  "errorCode": "404",
  "preamble": "Sidan du eftersökte kunde tyvärr inte hittas.",
  "suggestion": "Försök <a href=\"#\" class=\"js-history\">backa i webbläsaren</a> eller gå till <a href=\"/\">startsidan</a>.",
  "errorMessage": "error - Sidan kan inte hittas"
}

File:

Content:


                                @charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/baseline/plumber' as plumber;

@include mixin.molecule(system-error) {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: func.rhythm(8) 0;

	@include breakpoint.bp-up(md) {
		justify-content: center;
	}

	@include bem.e(content) {
		max-width: 600px;
		padding-right: var.$grid-gutter-width;
		padding-left: var.$grid-gutter-width;
		text-align: left;
	}

	@include bem.e(heading) {

		@include plumber.plumber(
			$font-size: 10,
			$line-height: 11,
			$leading-bottom: 2
		);

		animation: rumble 4s infinite linear;
		font-family: var.$font-family-mono;
		text-shadow: 0 1px 0 rgba(colors.$color-snow, 0.8), 0 30px 100px rgba(colors.$color-cyberspace, 0.5);

		@include breakpoint.bp-up(md) {

			@include plumber.plumber(
				$font-size: 15,
				$line-height: 16,
				$leading-bottom: 4
			);
		}
	}
}

URL: /components/raw/system-error/_system-error.scss
Filesystem Path: src/molecules/system-error/_system-error.scss
Size: 1.3 KB

Content:


                                const element = document.querySelector('.js-history');

function goBack(e) {
	e.preventDefault();
	window.history.go(-1);
}

if (element) {
	element.addEventListener('click', goBack);
}

URL: /components/raw/system-error/system-error.js
Filesystem Path: src/molecules/system-error/system-error.js
Size: 186 Bytes

Handle: @system-error
Preview:
- With layout
- Component only
Filesystem Path: src/molecules/system-error/system-error.hbs

No notes defined.