Fehlerseite

Die Fehlerseite wird ohne Header und Inhaltsbereich ausgespielt (<div class="site-header">, <div class="site-content">).

Der Fuß wird wie gewohnt ausgegeben.

<body>
    <div class="error-page d-flex flex-grow-1 justify-content-center align-items-center p-3">
        […]
    </div>
    <footer class="site-footer">
        […]
    </footer>
</body>

Beispielhafte Umsetzung

.error-page {
    background: #fff url('/resources/images/coast-bg.jpg') center/cover;

    > .container {
        background-color: rgba($gray-300, 50%);
        width: 640px;
    }

    .display-1,
    .lead {
        text-transform: uppercase;
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 500;
        letter-spacing: .1em;
        line-height: 1;
    }

    .lead {
        font-size: 1.15rem;
    }
}

Varianten

Standard

Uuups…

Leider ist ein unerwarteter Fehler aufgetreten.

Das Corespot-Manager-Team ist bereits über den Fehler informiert und ist bemüht diesen schnellstmöglich zu lösen.

Zurück Zum Dashboard 
<div class="error-page d-flex flex-grow-1 justify-content-center align-items-center p-3">
    <div class="container p-4">
        <div class="row mb-5">
            <div class="col text-center">
                <img src="https://dev-design.corespot-manager.com/build/assets/core-spot-logo-DeQtP4Bo.svg" width="300px" alt>
            </div>
        </div>
        <div class="row mb-4 px-5">
            <div class="col text-center">
                <h1 class="display-1">Uuups…</h1>
                <p class="lead mb-4">Leider ist ein unerwarteter Fehler aufgetreten.</p>
                <p class="mb-0">
                    Das Corespot-Manager-Team ist bereits über den Fehler informiert  und ist bemüht diesen schnellstmöglich zu
                    lösen.
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col position-relative text-center">
                <a href="#" class="btn btn-link position-absolute start-0">Zurück</a>
                <a href="#" class="btn btn-primary">Zum Dashboard</a>
            </div>
        </div>
    </div>
</div>

Varianten