<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>
<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>
{
  "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"
}
  • Content:
    @charset 'UTF-8';
    
    @include molecule(system-error) {
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	margin: rhythm(8) 0;
    
    	@include bp-up(md) {
    		justify-content: center;
    	}
    
    	@include e(content) {
    		max-width: 600px;
    		padding-right: $grid-gutter-width;
    		padding-left: $grid-gutter-width;
    		text-align: left;
    	}
    
    	@include e(heading) {
    
    		@include plumber(
    			$font-size: 10,
    			$line-height: 11,
    			$leading-bottom: 2
    		);
    
    		animation: rumble 4s infinite linear;
    		font-family: $font-family-mono;
    		text-shadow: 0 1px 0 rgba($color-snow, 0.8), 0 30px 100px rgba($color-cyberspace, 0.5);
    
    		@include bp-up(md) {
    
    			@include plumber(
    				$font-size: 15,
    				$line-height: 16,
    				$leading-bottom: 4
    			);
    		}
    	}
    }
    
    @keyframes rumble {
    	1% { transform: rotate(0deg); }
    	1.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
    	1.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
    	1.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
    	1.8% { transform: translate(0, rem(20px)) rotate(0deg); }
    
    	2% { transform: rotate(0deg); }
    	2.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
    	2.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
    	2.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
    	2.8% { transform: translate(0, rem(20px)) rotate(0deg); }
    
    	3% { transform: rotate(0deg); }
    	3.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
    	3.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
    	3.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
    	3.8% { transform: translate(0, rem(20px)) rotate(0deg); }
    
    	4% { transform: rotate(0deg); }
    	4.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
    	4.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
    	4.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
    	4.8% { transform: translate(rem(20px), 0) rotate(0deg); }
    	5% { transform: rotate(0deg); }
    
    	5.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
    	5.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
    	5.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
    	5.8% { transform: translate(0, rem(20px)) rotate(0deg); }
    
    	6% { transform: rotate(0deg); }
    	6.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
    	6.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
    	6.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
    	6.8% { transform: translate(0, rem(20px)) rotate(0deg); }
    
    	7% { transform: rotate(0deg); }
    	7.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
    	7.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
    	7.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
    	7.8% { transform: translate(0, rem(20px)) rotate(0deg); }
    
    	8% { transform: rotate(0deg); }
    	8.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
    	8.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
    	8.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
    	8.8% { transform: translate(0, rem(20px)) rotate(0deg); }
    
    	9% { transform: rotate(0deg); }
    	9.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
    	9.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
    	9.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
    	9.8% { transform: translate(0, rem(20px)) rotate(0deg); }
    
    	10% { transform: rotate(0deg); }
    	10.2% { transform: translate(rem(20px), 0) rotate(-10deg); }
    	10.4% { transform: translate(0, -#{rem(20px)}) rotate(0deg); }
    	10.6% { transform: translate(-#{rem(20px)}, 0) rotate(10deg); }
    	10.8% { transform: translate(0, rem(20px)) rotate(0deg); }
    	11% { transform: rotate(0deg); }
    }
    
  • URL: /components/raw/system-error/_system-error.scss
  • Filesystem Path: src/molecules/system-error/_system-error.scss
  • Size: 3.6 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

No notes defined.