Each variation will be presented in the following section.
Wieso das passiert ist?:
Wir arbeiten momentan an unserer Webseite der Ludwig-Maximilians-Universität München und deshalb kannst Du sie gerade nicht erreichen.
Versuche es in einigen Minuten noch einmal.
component)This component represents the contentview of the error pages 404 and 503.
Veams#5.0.0veams install bp absolute/filepath/to/error-page
error-page.hbs| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.errorPageClasses | String | '' |
Modifier classes for component |
| settings.errorPageContextClass | String | '404' |
Context class of component Error Page 404 |
| settings.errorPageContextClass | String | '503' |
Context class of component Error Page 503 |
| Parameter | Type | Description |
|---|---|---|
| content.mainHeadline | String | Set the default headline of the error page |
| content.description | String | Set the error page description |
| content.navigation | Array | Data for related navigation-solutions |
error-page__navigation.hbs| Parameter | Type | Description |
|---|---|---|
| headline | String | Set the headline for the navigation area |
| showTextLink | String | Set the type of navigation, ‘yes’ = Navigation with an arrow and a text, ‘’ = List-Navigation with no text |
| items | Array | Set different variables for one navigation point |
| items.itemClasses | String | Set the classname for the specific navigation point |
| items.linkText | String | Set the link text for the specific navigation point |
| items.linkHref | String | Set the url for the specific navigation point |
| items.linkTarget | String | Set the target name for the specific navigation point, if the string empty no target is defined |
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $error-page-watermark-img-svg | ../img/footer-bg.svg |
Path to the watermark image as svg-file |
| $error-page-watermark-img-png | ../img/footer-bg.svg |
Path to the watermark image as png-file |
| $error-page-watermark-opacity | .1 |
Opacity for the watermark image area |
There are modifier classes you can add to error-page__navigation-list-item in the error-page-navigation.hbs::
| Modifier | Description |
|---|---|
| is-facebook | For the facebook icon in an error page 503 |
| is-twitter | For the twitter icon in an error page 503 |
| is-instagram | For the instagram icon in an error page 503 |
| is-youtube | For the youtube icon in an error page 503 |
There are modifier classes you can add to error-page__navigation in the error-page-navigation.hbs::
| Modifier | Description |
|---|---|
| is-start | For the ‘to start’ link in an error page 404 |
| is-sitemap | For the ‘to sitemap’ link in an error page 404 |
<div class="c-error-page{{#if settings.errorPageContextClass}}--{{settings.errorPageContextClass}}{{else}}--default{{/if}}{{#if settings.errorPageClasses}} {{settings.errorPageClasses}}{{/if}}"
data-css="c-error-page">
{{#wrapWith "grid__container"}}
{{#wrapWith "grid__row"}}
<div class="error-page__content">
{{#if content.mainHeadline}}<h2 class="error-page__headline">{{content.mainHeadline}}</h2>{{/if}}
{{#if content.description}}<div class="error-page__description">{{{content.description}}}</div>{{/if}}
{{#each content.navigation}}
{{> error-page__navigation}}
{{/each}}
</div>
<div class="error-page__watermark" aria-hidden="true"><div class="error-page__watermark_bg" aria-hidden="true"> </div></div>
{{/wrapWith}}
{{/wrapWith}}
</div>
{{#if headline}}<h3 class="error-page__subheadline">{{headline}}</h3>{{/if}}
<nav class="error-page__navigation-area">
{{#if showTextLink}}
{{#each items}}
{{#with this}}
{{> link-button }}
{{/with}}
{{/each}}
{{else}}
<ul class="error-page__navigation-list">
{{#each items}}
{{#if linkText}}
<li class="error-page__navigation-list-item{{#if itemClasses}} {{itemClasses}}{{/if}}">
<a class="error-page__navigation-list-link" href="{{#if linkHref}}{{linkHref}}{{else}}#{{/if}}"{{#if linkTarget}} target="{{linkTarget}}" title="{{{linkText}}}" {{/if}}><span class="error-page__navigation-list-link-text">{{{linkText}}}</span></a>
</li>
{{/if}}
{{/each}}
</ul>
{{/if}}
</nav>
{
"title": "error-page",
"variations": {
"default": {
"docs": {
"variationName": "404 Error Page"
},
"settings": {
"errorPageContextClass": "404",
"errorPageClasses": ""
},
"content": {
"mainHeadline": "Oh! Die von Dir gesuchte Seite wurde leider nicht gefunden (Fehler 404)",
"description": "<p><b>Wieso das passiert ist?:</b></p><ul><li>Die Seite wurde eventuell umbenannt oder verschoben</li><li>Hast Du die URL manuell eingetragen und Dich dabei vertippt?</li></ul>",
"navigation": [
{
"headline": "",
"showTextLink": "yes",
"items": [
{
"settings": {
"linkButtonContextClass": "default",
"linkButtonClasses": "is-start error-page__navigation"
},
"content": {
"linkHref": "#",
"linkContent": "zur Startseite"
}
},
{
"settings": {
"linkButtonContextClass": "default",
"linkButtonClasses": "is-sitemap error-page__navigation"
},
"content": {
"linkHref": "#",
"linkContent": "zur Sitemap"
}
}
]
}
]
}
},
"error-503": {
"docs": {
"variationName": "503 Error Page"
},
"settings": {
"errorPageContextClass": "503",
"errorPageClasses": ""
},
"content": {
"mainHeadline": "Die Seite ist aktuell nicht verfügbar. (Fehler 503)",
"description": "<p>Wir arbeiten momentan an unserer Webseite der Ludwig-Maximilians-Universität München und deshalb kannst Du sie gerade nicht erreichen.</p><p>Versuche es in einigen Minuten noch einmal.</p>",
"navigation": [
{
"headline": "Schaue in der Zwischenzeit in unseren sozialen Kanälen vorbei.",
"showTextLink": "",
"items": [
{
"itemClasses": "is-facebook",
"linkText": "Facebook",
"linkHref": "#",
"linkTarget": "_blank"
},
{
"itemClasses": "is-twitter",
"linkText": "Twitter",
"linkHref": "#",
"linkTarget": "_blank"
},
{
"itemClasses": "is-instagram",
"linkText": "Instagram",
"linkHref": "#",
"linkTarget": "_blank"
},
{
"itemClasses": "is-linkedin",
"linkText": "Linkedin",
"linkHref": "#",
"linkTarget": "_blank"
}
]
}
]
}
}
}
}
/* ===================================================
component: error-page
=================================================== */
/* ---------------------------------------------------
Global Variables
--------------------------------------------------- */
$error-page-watermark-img-svg: "../img/footer-bg.svg" !default;
$error-page-watermark-img-png: "../img/footer-bg.svg" !default;
$error-page-watermark-opacity: .1 !default;
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-error-page"] {
position: relative;
overflow: hidden;
width: 100%;
background-color: $color-white;
padding: 0 0 22%;
@include bp($bp-tablet-p) {
padding: 2% 0 10%;
}
.error-page__content {
position: relative;
z-index: 4;
width: 100%;
@include bp($bp-mobile-p) {
width: calc((100% / 12) * 9);
}
@include bp($bp-tablet-p) {
width: calc((100% / 12) * 7);
}
@include bp($bp-desktop-m) {
width: calc((100% / 12) * 6);
}
}
.error-page__headline {
@include headline-h2-styles();
}
.error-page__description {
padding: 0;
@include bp($bp-tablet-p) {
padding: 0 0 10px;
}
@include bp($bp-desktop-m) {
padding: 0 0 20px;
}
b {
font-weight: bold;
}
p {
@include content-p-styles();
}
ul {
@include content-ul-styles();
}
ol {
@include content-ol-styles();
}
}
.error-page__watermark {
position: absolute;
z-index: 1;
bottom: 14px;
left: calc((100% / 12) * 6.7);
width: calc((100% / 12) * 8.5);
height: 100%;
opacity: $error-page-watermark-opacity;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
@include bp($bp-mobile-p) {
left: calc((100% / 12) * 7);
width: calc((100% / 12) * 7);
}
@include bp($bp-tablet-p) {
margin-bottom: 0;
left: calc((100% / 12) * 8.7);
width: calc((100% / 12) * 4.4);
justify-content: center;
bottom: 0;
}
@include print() {
display: none;
}
}
.error-page__watermark_bg {
width: 100%;
max-width: 590px;
padding-top: 100%;
background: $color-white url(#{$error-page-watermark-img-svg}) left
bottom no-repeat;
background-size: 100% 100%;
float: right;
}
.no-svg .error-page__watermark_bg {
background: $color-white url(#{$error-page-watermark-img-png}) no-repeat;
}
.error-page__subheadline {
font-weight: bold;
font-size: 1.5rem;
line-height: (22/16);
padding: 10px 0 5px;
@include bp($bp-tablet-p) {
padding: 20px 0 5px;
}
@include bp($bp-desktop-m) {
font-size: 1.6rem;
}
}
}
/* ---------------------------------------------------
Context: 404
--------------------------------------------------- */
.c-error-page--404, .c-error-page--lightbox {
.error-page__navigation-area {
float: left;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
flex-basis: content;
@include bp($bp-tablet-p) {
flex-direction: row;
align-items: flex-start;
}
}
.error-page__navigation {
float: left;
margin: 0 0 13px;
@include bp($bp-tablet-p) {
margin: 0 10px 10px 0;
}
@include bp($bp-tablet-l) {
margin: 0 30px 10px 0;
}
&:last-child {
margin: 0;
}
}
}
.c-error-page--lightbox {
position: relative;
max-width: 840px;
padding: 10% 0 10%;
@include bp($bp-tablet-p) {
padding: 2% 0 10%;
}
.error-page__watermark {
margin-bottom: 0;
left: calc((100% / 12) * 8);
width: calc((100% / 12) * 6);
justify-content: center;
bottom: 0;
@include bp($bp-mobile-p) {
width: calc((100% / 12) * 5);
}
@include bp($bp-tablet-p) {
left: calc((100% / 12) * 8.7);
width: calc((100% / 12) * 4.4);
}
}
}
/* ---------------------------------------------------
Context: 503
--------------------------------------------------- */
.c-error-page--503 {
@include bp($bp-desktop-m) {
padding: 2% 0 7%;
}
.error-page__content {
@include bp($bp-tablet-p) {
width: calc((100% / 12) * 6);
}
}
.error-page__navigation-list {
position: relative;
z-index: 2;
overflow: hidden;
padding: 6% 0 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
@include bp($bp-tablet-l) {
margin-right: 0;
}
@include print() {
display: none;
}
}
.error-page__navigation-list-item {
@include grid-box(2.5);
position: relative;
border-right: 1px solid $color-white;
@include bp($bp-mobile-p) {
@include grid-box(2);
}
&:last-child {
border-right: none;
}
&.is-facebook,
&.is-twitter,
&.is-instagram,
&.is-youtube,
&.is-linkedin,
&.is-researchgate,
&.is-academia,
&.is-orcid {
border-bottom: 1px solid $color-white;
.error-page__navigation-list-link {
border-color: $color-blue;
background-color: $color-blue;
transition: all $animation-duration-std $animation-easing-std;
cursor: pointer;
&:hover,
&.a11y-focus-key {
background-color: $color-white;
border-color: $color-blue;
color: $color-blue;
}
&.a11y-focus-key {
outline-offset: -2px;
}
}
}
&.is-facebook {
.error-page__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-facebook-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 1.6rem;
}
}
.error-page__navigation-list-link {
&:hover,
&.a11y-focus-key {
.error-page__navigation-list-link-text {
@include sprites-icon-facebook-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-twitter {
.error-page__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-twitter-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.error-page__navigation-list-link {
&:hover,
&.a11y-focus-key {
.error-page__navigation-list-link-text {
@include sprites-icon-twitter-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-instagram {
.error-page__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-instagram-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.error-page__navigation-list-link {
&:hover,
&.a11y-focus-key {
.error-page__navigation-list-link-text {
@include sprites-icon-instagram-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-youtube {
.error-page__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-youtube-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.error-page__navigation-list-link {
&:hover,
&.a11y-focus-key {
.error-page__navigation-list-link-text {
@include sprites-icon-youtube-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-linkedin {
.error-page__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-linkedin-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.error-page__navigation-list-link {
&:hover,
&.a11y-focus-key {
.error-page__navigation-list-link-text {
@include sprites-icon-linkedin-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-researchgate {
.error-page__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-researchgate-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.error-page__navigation-list-link {
&:hover,
&.a11y-focus-key {
.error-page__navigation-list-link-text {
@include sprites-icon-researchgate-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-academia {
.error-page__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-academia-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.error-page__navigation-list-link {
&:hover,
&.a11y-focus-key {
.error-page__navigation-list-link-text {
@include sprites-icon-academia-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
&.is-orcid {
.error-page__navigation-list-link-text {
@include hidden-text();
@include sprites-icon-orcid-white();
transform: scale(.7);
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
.error-page__navigation-list-link {
&:hover,
&.a11y-focus-key {
.error-page__navigation-list-link-text {
@include sprites-icon-orcid-blue();
@include hcm() {
color: $color-black;
height: auto;
width: auto;
font-size: 16px;
}
}
}
}
}
}
.error-page__navigation-list-link-text {
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
display: block;
}
@include bp($bp-mobile-s) {
transform: scale(.7);
}
@include bp($bp-mobile-p) {
transform: scale(.7);
}
@include bp($bp-desktop-m) {
transform: scale(1);
}
}
.error-page__navigation-list-link {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
text-decoration: none;
border: 1px solid;
color: $color-white;
justify-content: center;
align-items: center;
cursor: pointer;
@include print() {
border: none;
}
&.a11y-focus-key {
outline-offset: -2px;
}
}
}
<div class="c-error-page--404" data-css="c-error-page">
<div class="grid__container">
<div class="grid__row">
<div class="error-page__content">
<h2 class="error-page__headline">Oh! Die von Dir gesuchte Seite wurde leider nicht gefunden (Fehler 404)</h2>
<div class="error-page__description">
<p><b>Wieso das passiert ist?:</b></p>
<ul>
<li>Die Seite wurde eventuell umbenannt oder verschoben</li>
<li>Hast Du die URL manuell eingetragen und Dich dabei vertippt?</li>
</ul>
</div>
<nav class="error-page__navigation-area">
<div class="c-link-button--default is-start error-page__navigation" data-css="c-link-button">
<a class="link-button__link" href="#">zur Startseite</a>
</div>
<div class="c-link-button--default is-sitemap error-page__navigation" data-css="c-link-button">
<a class="link-button__link" href="#">zur Sitemap</a>
</div>
</nav>
</div>
<div class="error-page__watermark" aria-hidden="true">
<div class="error-page__watermark_bg" aria-hidden="true"> </div>
</div>
</div>
</div>
</div><div class="c-error-page--503" data-css="c-error-page">
<div class="grid__container">
<div class="grid__row">
<div class="error-page__content">
<h2 class="error-page__headline">Die Seite ist aktuell nicht verfügbar. (Fehler 503)</h2>
<div class="error-page__description">
<p>Wir arbeiten momentan an unserer Webseite der Ludwig-Maximilians-Universität München und deshalb kannst Du sie gerade nicht erreichen.</p>
<p>Versuche es in einigen Minuten noch einmal.</p>
</div>
<h3 class="error-page__subheadline">Schaue in der Zwischenzeit in unseren sozialen Kanälen vorbei.</h3>
<nav class="error-page__navigation-area">
<ul class="error-page__navigation-list">
<li class="error-page__navigation-list-item is-facebook">
<a class="error-page__navigation-list-link" href="#" target="_blank" title="Facebook"><span class="error-page__navigation-list-link-text">Facebook</span></a>
</li>
<li class="error-page__navigation-list-item is-twitter">
<a class="error-page__navigation-list-link" href="#" target="_blank" title="Twitter"><span class="error-page__navigation-list-link-text">Twitter</span></a>
</li>
<li class="error-page__navigation-list-item is-instagram">
<a class="error-page__navigation-list-link" href="#" target="_blank" title="Instagram"><span class="error-page__navigation-list-link-text">Instagram</span></a>
</li>
<li class="error-page__navigation-list-item is-linkedin">
<a class="error-page__navigation-list-link" href="#" target="_blank" title="Linkedin"><span class="error-page__navigation-list-link-text">Linkedin</span></a>
</li>
</ul>
</nav>
</div>
<div class="error-page__watermark" aria-hidden="true">
<div class="error-page__watermark_bg" aria-hidden="true"> </div>
</div>
</div>
</div>
</div>