Error Pages
404, 500, 403 and maintenance error page layouts.
Classic 404
404
Page not found
Sorry, the page you're looking for doesn't exist or has been moved.
<div class="uk-error uk-error-classic">
<div class="uk-error-code">404</div>
<h4 class="uk-error-title">Page not found</h4>
<p class="uk-error-desc">Sorry, the page you're looking for doesn't exist.</p>
<div class="uk-error-actions">
<a href="#" class="uk-error-btn uk-error-btn-primary">Back to Home</a>
<a href="#" class="uk-error-btn uk-error-btn-ghost">Contact Support</a>
</div>
</div>
<style>
.uk-error-classic { text-align: center; padding: 3rem 1.5rem; }
.uk-error-code {
font-size: 6rem;
font-weight: 900;
line-height: 1;
background: linear-gradient(135deg, #1e3a8a, #6366f1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.05em;
}
.uk-error-title {
font-size: 1.5rem;
font-weight: 800;
color: #0b1b2f;
margin: 0.75rem 0 0.5rem;
}
.uk-error-desc {
font-size: 0.9rem;
color: #64748b;
max-width: 420px;
margin: 0 auto 1.75rem;
line-height: 1.6;
}
.uk-error-actions {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.uk-error-btn {
padding: 0.7rem 1.5rem;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.85rem;
text-decoration: none;
transition: all 0.15s;
}
.uk-error-btn-primary { background: #1e3a8a; color: #fff; }
.uk-error-btn-primary:hover { background: #0f2a5c; color: #fff; }
.uk-error-btn-ghost {
background: transparent;
border: 1.5px solid #cbd5e1;
color: #0b1b2f;
}
.uk-error-btn-ghost:hover { border-color: #1e3a8a; color: #1e3a8a; }
</style>
Illustrated 404
<div class="uk-error uk-error-illustrated">
<div class="uk-error-illustration">
<div class="uk-error-globe"></div>
<div class="uk-error-astronaut"><i class="fas fa-user-astronaut"></i></div>
</div>
<h4 class="uk-error-title">Lost in space</h4>
<p class="uk-error-desc">This page drifted into the void.</p>
<a href="#" class="uk-error-btn uk-error-btn-primary">Take Me Home</a>
</div>
<style>
.uk-error-illustrated { text-align: center; padding: 3rem 1.5rem; }
.uk-error-illustration {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto 1.5rem;
}
.uk-error-globe {
width: 140px; height: 140px;
border-radius: 50%;
background: linear-gradient(135deg, #dbeafe 0%, #c7d2fe 100%);
margin: 30px auto 0;
box-shadow: inset -20px -20px 40px rgba(30,58,138,0.15);
}
.uk-error-astronaut {
position: absolute;
top: 0; right: 20px;
width: 80px; height: 80px;
border-radius: 50%;
background: #1e3a8a;
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 2rem;
box-shadow: 0 20px 40px rgba(30,58,138,0.3);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
</style>
500 Server Error
Error 500
Something went wrong
Our servers hit a snag. We're working on it — please try again in a moment.
<div class="uk-error uk-error-split">
<div class="uk-error-split-visual" style="background:#fef2f2;">
<i class="fas fa-triangle-exclamation" style="color:#dc2626;"></i>
</div>
<div class="uk-error-split-content">
<div class="uk-error-badge" style="background:#fef2f2;color:#dc2626;">Error 500</div>
<h4 class="uk-error-title">Something went wrong</h4>
<p class="uk-error-desc">Our servers hit a snag.</p>
<div class="uk-error-actions">
<a href="#" class="uk-error-btn uk-error-btn-primary">Try Again</a>
<a href="#" class="uk-error-btn uk-error-btn-ghost">Status Page</a>
</div>
</div>
</div>
<style>
.uk-error-split {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 2rem;
align-items: center;
padding: 2rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1.25rem;
}
@media (max-width: 640px) {
.uk-error-split { grid-template-columns: 1fr; text-align: center; }
.uk-error-split-content .uk-error-title,
.uk-error-split-content .uk-error-desc { text-align: center !important; }
.uk-error-split-content .uk-error-actions { justify-content: center !important; }
}
.uk-error-split-visual {
aspect-ratio: 1;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
}
.uk-error-badge {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
</style>
403 Forbidden
403 Forbidden
Access denied
You don't have permission to view this page. If you believe this is an error, contact an administrator.
<div class="uk-error uk-error-classic">
<div class="uk-error-icon-circle" style="background:#fef3c7;color:#d97706;">
<i class="fas fa-lock"></i>
</div>
<div class="uk-error-badge" style="background:#fef3c7;color:#d97706;">403 Forbidden</div>
<h4 class="uk-error-title">Access denied</h4>
<p class="uk-error-desc">You don't have permission to view this page.</p>
<a href="#" class="uk-error-btn uk-error-btn-primary">Go to Dashboard</a>
</div>
<style>
.uk-error-icon-circle {
width: 80px; height: 80px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 1rem;
}
</style>
Maintenance Mode
We'll be right back
We're performing scheduled maintenance. We'll be back online shortly.
Estimated time remaining: 45 minutes
<div class="uk-error uk-error-maintenance">
<div class="uk-error-maintenance-icon"><i class="fas fa-gear"></i></div>
<h4 class="uk-error-title">We'll be right back</h4>
<p class="uk-error-desc">Scheduled maintenance in progress.</p>
<div class="uk-error-progress">
<div class="uk-error-progress-bar"></div>
</div>
<div class="uk-error-eta">Estimated time remaining: 45 minutes</div>
<form class="uk-error-notify">
<input type="email" placeholder="[email protected]" required>
<button type="submit">Notify Me</button>
</form>
</div>
<style>
.uk-error-maintenance {
text-align: center;
padding: 3rem 1.5rem;
background: linear-gradient(180deg, #eef2f8 0%, #f9fafc 100%);
border-radius: 1.25rem;
}
.uk-error-maintenance-icon {
width: 72px; height: 72px;
border-radius: 50%;
background: #1e3a8a;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: 1rem;
animation: spin 4s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.uk-error-progress {
height: 6px;
background: #e2e8f0;
border-radius: 999px;
overflow: hidden;
max-width: 320px;
margin: 1.5rem auto 0.75rem;
}
.uk-error-progress-bar {
height: 100%;
width: 65%;
background: linear-gradient(90deg, #1e3a8a, #6366f1);
border-radius: 999px;
}
.uk-error-eta {
font-size: 0.78rem;
color: #94a3b8;
margin-bottom: 1.25rem;
}
.uk-error-notify {
display: flex;
gap: 0.5rem;
max-width: 360px;
margin: 0 auto;
padding: 0.35rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 999px;
}
.uk-error-notify input {
flex: 1;
border: 0;
outline: 0;
padding: 0.5rem 1rem;
background: transparent;
font-size: 0.85rem;
border-radius: 999px;
}
.uk-error-notify button {
padding: 0.5rem 1.25rem;
background: #1e3a8a;
color: #fff;
border: 0;
border-radius: 999px;
font-weight: 700;
font-size: 0.8rem;
cursor: pointer;
}
</style>
Offline Error
No connection
You're offline
Check your internet connection and try again. Some pages may be available from cache.
<div class="uk-error uk-error-classic">
<div class="uk-error-icon-circle" style="background:#f1f5f9;color:#475569;">
<i class="fas fa-wifi"></i>
</div>
<div class="uk-error-badge" style="background:#f1f5f9;color:#475569;">No connection</div>
<h4 class="uk-error-title">You're offline</h4>
<p class="uk-error-desc">Check your connection and try again.</p>
<a href="#" class="uk-error-btn uk-error-btn-primary">
<i class="fas fa-rotate-right"></i> Retry
</a>
</div>