Error Page - 403 Forbidden — JCrafts Design System

HTML Code (Demo)

<link rel="stylesheet" href="/assets/jtemplate/css/template/error.css" webc:keep>
<section class="error-hero" aria-labelledby="error-heading">
  <div class="error-backdrop" aria-hidden="true">403</div>
  <div class="error-content card">
    <h1 id="error-heading">Access Denied</h1>
    <p>We were not able to locate the page you've requested.<br>This may be due to:</p>
    <ul>
      <li>An out-of-date bookmark or favourite</li>
      <li>A mistyped address</li>
      <li>A search engine out-of-date listing</li>
      <li>You have no access to this page</li>
    </ul>
    <p>Go to the home page and look around.</p>
    <a href="/" class="btn-primary">
    <i class="fa fa-home me-2" aria-hidden="true"></i>
    Home</a>
  </div>
</section>
<footer class="error-footer">
  <a href="/imprint">Imprint</a>
  <a href="/privacy-policy">Privacy Policy</a>
</footer>

Configuration

Component Config: Compositions/error-page/error-page.config.js

{
  "errorCode": "403",
  "errorTitle": "Access Denied",
  "suggestions": [
    "An out-of-date bookmark or favourite",
    "A mistyped address",
    "A search engine out-of-date listing",
    "You have no access to this page"
  ],
  "homeUrl": "/",
  "sitename": "JCrafts",
  "logoSrc": "/assets/images/logo/jclogo.svg",
  "footerLinks": [
    {
      "url": "/imprint",
      "label": "Imprint"
    },
    {
      "url": "/privacy-policy",
      "label": "Privacy Policy"
    }
  ]
}